How to Extract the nth DIV by Class and Sibling in HTML Using VBA

Description:
Learn how to efficiently extract the inner text of a specific div element based on sibling relationships using VBA and query selectors for HTML parsing.
---
This video is based on the question https://stackoverflow.com/q/79527122/ asked by the user 'Jasco' ( https://stackoverflow.com/u/15428580/ ) and on the answer https://stackoverflow.com/a/79527192/ provided by the user 'Michał Turczyn' ( https://stackoverflow.com/u/7132550/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to get the nth DIV of a tag in HTML using VBA and selectors for export to Excel

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Introduction

Parsing HTML content with VBA can be tricky when you want to extract data based on the relationship between sibling elements. This guide focuses on extracting the inner text of a <div> that follows another <div> with a known class and exact inner text. For example, you want the content of a <div> with class hn-4 md:ml-1 but only when its preceding sibling <div> has inner text "NUMBER:".



The Problem

Given a structure like this:

[[See Video to Reveal this Text or Code Snippet]]

You want to:

Identify the <div> with class align-text-top pr-1 md:pr-7 w-41 whose inner text is "NUMBER:".

From that <div>, get the inner text of its next sibling <div>, which in this case is "TWO".

Initial attempts failed because they incorrectly tried to map elements by index instead of traversing sibling nodes.



Solution Overview

Using VBA’s querySelectorAll, find all <div> elements matching the first class. Then for each matching element:

Check if its inner text equals "NUMBER:".

Navigate to the next sibling node that is an element node (ignore text nodes or whitespace).

Extract the inner text of that sibling.

This ensures you get the target <div> content correctly regardless of other unrelated elements.



Updated VBA Code

[[See Video to Reveal this Text or Code Snippet]]

Key Points:

Use querySelectorAll with CSS classes joined by . and escape colons (:) as needed.

Trim inner text before comparison to avoid whitespace issues.

Use .nextSibling but loop until an element node is found (some siblings could be text nodes).



Conclusion

By navigating from the matched parent <div> to its actual sibling element node, you can reliably extract the desired inner text. This method works well for HTML scraping tasks in VBA, especially when working with complex class names and sibling relationships.

Remember to adjust the URL and ensure references to MSHTML are set up in your VBA environment.