Capturing an HTML tag with CSS selectors

☰ TOPICS

Capturing an HTML tag with CSS selectors

External resources:
CSS selectors reference – W3 Schools
CSS selectors reference – Mozilla.org

CSS selectors are expressions commonly used in web development to apply styles to HTML elements. However, they can also be used to locate and extract specific pieces of content from the HTML code of an email.

Since many HTML tags are labeled with a class name or an ID, you can write a CSS selector that targets exactly the tag you want to capture from the email BodyHTML field. Let’s see a very simple example:

<html>
    <head>    
    </head>
    <body>
    	<p>
    		Hello Matt,<br />
    		<br />
    		Your website <span>MullerConstruction.com</span> has generated a new lead:
    	</p>
        <table class="lead_table">
            <tbody>
                <tr>
                    <td>Name:</td>
                    <td>John Doe</td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td>+1234567890</td>
                </tr>
            </tbody>
        </table>
        <div>
        	This lead was generated by:
        	<div>
        		The contact form
        	</div>
        </div>
    </body>
</html>

This is how the email looks when you open it:

Selecting a tag in an email for parsing with CSS selectors

In CSS selector syntax, a dot followed by a class name targets any HTML element with that class. In this case, writing .lead_table as the CSS selector captures the table from the HTML code:

But CSS selectors can be much more complicated than just using the class name. For instance, if we use:

	.lead_table td:nth-child(2)

We get the content of the second column in the first row of the table:

	John Doe

The following table shows the most common CSS selectors and their meaning:

Selector	Example	Example description
.class	.header	Selects all elements with class=”header”
.classA.classB	.nameA.nameB	Selects all elements with both nameA and nameB in the class attribute
.classA .classB	.nameA .nameB	Selects all elements with class nameB that are descendants of an element with class nameA
#id	#customername	Selects the element with id=”customername”
element	div	Selects all <div> elements
element.class	div.pricing	Selects all <div> elements of the class pricing
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that is placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that is preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target=”_blank”
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word “flower”
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value equal to “en” or starting with “en-“
[attribute^=value]	a[href^=”https”]	Selects every <a> element whose href attribute value begins with “https”
[attribute$=value]	a[href$=”.pdf”]	Selects every <a> element whose href attribute value ends with “.pdf”
[attribute*=value]	a[href*=”w3schools”]	Selects every <a> element whose href attribute value contains the substring “w3schools”
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent