Let’s keep digging into CSS Selectors using a portion of HTML code from the previous unit:
<html> <header> <title>Yearly budget and expenses</title> </header> <body> <div id="firstBlock"> This page contains counts updated thru <strong>September 25th, 2019</strong> relating to budgets and expenses. <span>Total Budget: <i>12,000,000 Euro</i></span><br/> <span>Total Expenses: <i>6,000,000 Euro</i></span> </div> <table id="year2017"> <tr><td>Month</td><td>Relative (Euro)</td><td>Absolute (Euro)</td></tr> <tr><td>Jan-Feb</td><td>1,000,000</td><td>1,000,000</td></tr> <tr><td>Mar-Apr</td><td>1,000,000</td><td>2,000,000</td></tr> <tr><td>May-Jun</td><td>1,000,000</td><td>3,000,000</td></tr> <tr><td>Jul-Aug</td><td>1,000,000</td><td>4,000,000</td></tr> <tr><td>Sep-Oct</td><td>1,000,000</td><td>5,000,000</td></tr> <tr><td>Nov-Dec</td><td>1,000,000</td><td>6,000,000</td></tr> </table> <div class="finalcredit">Final Credit: 6,000,000 Euro</div> <div class="finalcredit">Final Credit: 1.500.000 Euro</div> </body>
Here’s a list of what we think are the most common Selectors. The examples which can be found in the code above will be identified in bold.
| Selector | Example | Description |
| .class | .finalcredit | Selects all elements with class = “finalcredit”. In the example there are two div nodes. |
| .class1.class2 | <div class=”style1 style2″> | Selects the elements for which both style1 and style2 classes are specified. |
| #id | #year2017 | Selects the elements with id = “year2017”. In our example it is a table. |
| element | span | Selects all the span tags on the page. In our example there are two, and therefore span could be a repetitive element. |
| element#id | div#firstBlock | Selects the tag div with id = “firstBlock”. |
| element.class | div.finalcredit | Selects the div tags with class = “finalcredit”. |
| element element | div span | Selects the span tags contained within a div tag. The span tags could also be contained within other additional elements and would still be selected. In our example we would capture the two span elements inside div#firstBlock. |
| element>element | div > span | Selects span tags directly contained within a div tag. This specifies that the span tags must be first-degree children of the div tag. |
| element + element | span+span | Selects the span elements immediately after another span. Careful, this is after and not inside! Thus “body table+table+table ” selects the third child table of the tag body. |
| element1 ~ element2 | i ~ span | Selects the i elements preceded by a span tag. |
| [attribute=value ] | [height=500] | Selects all elements that specify a height attribute with a value of 500. |
| [attribute~=value] | [alt~=group] | Selects all elements that specify an alt attribute with value containing the word group. |
| [attribute|=value] | [alt|=group] | Select all elements that specify an alt attribute with a value that starts with the word group. |
| element[attribute=value] | a[title=Gallery] | Selects all the a elements that specify a title attribute with a value equal to the word Gallery. |
| [attribute^=value] | a[href^=”https”] | Selects all the a elements that specify an href attribute (which in practice is the address to which the link points) with a value that starts with https. |
| [attribute$=value] | a[href$=”.jpg”] | Selects all the a elements that specify an href attribute with a value that ends with .jpg. |
| [attribute*=value] | a[href*=”.google”] | Selects all the a items that specify an href attribute with a value that contains .google. |
| :first-child | div#firstBlock span:first-child | Selects the span element that is the first child of div#firstBlock. |
| ::first-letter | div#firstBlock span::first-letter | Selects the first letter of the text contained in each child span of div#firstBlock. |
| ::first-line | div#firstBlock span::first-line | Selects the first line of the text contained in each child span of div#firstBlock. |
| :last-child | div#firstBlock span:last-child | Selects the span item that is the last child of div#firstBlock. |
| :not(selector) | div#firstBlock:not(p) | Select all the elements contained in div#firstBlock, provided they are not p tags. |
| :nth-child(n) | div#firstBlock span:nth-child(2) | Selects the second child span tag of div#firstBlock. |
| :nth-last-child(n) | div#firstBlock span:last-child(2) | Select the second-to-last span tag, as long as it’s a child of div#firstBlock. In our example the penultimate also happens to be the first span since there are only 2 total. |
This list of Selectors will help you interpret even the most complex sections of code. If you’re looking for a bit of practice, try using the interactive test available here: https://www.w3schools.com/cssref/trysel.asp.
Finally, a quick spoiler: Free and Batch Data Collector have a few additional native Selectors that we’ll introduce in upcoming units, things that will allow you to quickly identify telephone numbers, webpage language, webpage URL, webpage title, and more!