Batch Data Collector – Free Data Collector

08. Advanced Selectors

  1. Knowledge Base
  2. LEARN: User guide
  3. 08. Advanced Selectors

Let’s keep digging into CSS Selectors using a portion of HTML code from the previous unit:

<title>Yearly budget and expenses</title>

<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>

<table id="year2017">
<tr><td>Month</td><td>Relative (Euro)</td><td>Absolute (Euro)</td></tr>

<div class="finalcredit">Final Credit: 6,000,000 Euro</div>
<div class="finalcredit">Final Credit: 1.500.000 Euro</div>


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.

.class.finalcreditSelects 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#year2017Selects the elements with id = “year2017”.
In our example it is a table.
elementspanSelects all the span tags on the page. In our example there are two, and therefore span could be a repetitive element.
element#iddiv#firstBlockSelects the tag div with id = “firstBlock”.
element.classdiv.finalcreditSelects the div tags with class = “finalcredit”.
element elementdiv spanSelects 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>elementdiv > spanSelects span tags directly contained within a div tag. This specifies that the span tags must be first-degree children of the div tag.
element + elementspan+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 ~ element2i ~ spanSelects 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-childdiv#firstBlock span:first-childSelects the span element that is the first child of div#firstBlock.
::first-letterdiv#firstBlock span::first-letterSelects the first letter of the text contained in each child span of div#firstBlock.
::first-linediv#firstBlock span::first-lineSelects the first line of the text contained in each child span of div#firstBlock.
:last-childdiv#firstBlock span:last-childSelects 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:

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!