top of page

CSS Selectors


 

ID

  1. Usage: An element has an associated ID.

  2. Syntax: #id

  3. Example:

  4. HTML:

<ul id="listOfItems" > .... </ul> 
  1. Selector: #listOfItems

 

Class

  1. Usage: An element has an associated class (or several classes).

  2. Syntax: .class (when there is only one class). When there are several classes (in the HTML they appear within the same 'class' attribute and they are separated by spaces), the syntax will be .class1.class2.classN (basically you replace all the spaces from between the elements of the class attribute with a '.' character, and you add a leading dot to the resulting text).

  3. Examples:

  4. HTML:

<div class="aClass" > .... </div> 
  1. Selector: .aClass

  2. HTML:

<div class="aClass anotherClass aThirdClass" > ... </div> 
  1. Selector: .aClass.anotherClass.aThirdClas

 

Element type

  1. Usage: Select all elements of a type.

  2. Syntax: elementType

  3. Examples:

  4. HTML:

<p>...</p> 
  1. Selector: p - this will return all the 'p' elements on the page

  2. HTML:

<div class="someClass" >...</div> <div>...</div> 
  1. Selector: div - will return all the 'div' elements on the page

 

Child elements

  1. Usage: Select all elements that are the n-th child of their parents.

  2. Syntax: element:nth-child(n)

  3. Syntax: element:nth-child(1) is the same as element:first-child

  4. Syntax: element:nth-child(indexOfLastElement) is the same as element:last-child

  5. Usage: Select all the children of an element (all the elements that are below the specified element in the HTML code).

  6. Syntax: parentElement > childElement

  7. Usage: Select all the descendants of an element (even those that are not direct children of the element).

  8. Syntax: parentElement childElement

  9. Examples:

  10. HTML:

<ul> <li>green</li><li>blue</li><li>red</li></ul> 
  1. Selector: li:nth-child(2) - will return the li element with the text 'blue'.

  2. Selector: li:nth-child(1) and li:first-child - will return the li element with the text 'green'

  3. Selector: li:nth-child(3) and li:last-child - will return the li element with the txt 'red'

  4. Selector: ul > li - will return all the li elements

  5. Selector: ul li - will return all the li elements also. If the syntax  would have been :

<div><ul><li>green</li><li>blue</li><li>red</li></ul></div>
, then: ul li and div li would have returned all the li elements; div > li would have returned nothing, as there is another element that is the direct descendant of the div element, namely the ul one - the correct child selector here would be div > ul > li. 
 

Attributes

  1. Usage: Select all elements that have a certain attribute, no matter what its' value is.

  2. Syntax:

  3. Example: - all the elements that have id's

  4. Usage: Select all the elements whose specified attribute has the specified value

  5. Syntax:

  6. Example:

  7. Usage: Select all the elements whose certain attribute contains a certain string of characters.

  8. Syntax: - all the elements for which the specified attribute contains the 'value' string

  9. Example: - all the elements that have a class attribute containing the 'classNumber' string. For example 'classNumber1', 'classNumber2', and so on.

 
<div class="firstClass">
<li>
<div class="secondClass andThirdClass" >
  <h3>
   <a href="aRandomLink”> randomText</a>
  </h3>
  <div class="fourthClass">
    <div>
      <div class="fifthClass">
        <a class="someSpecialClass" href="#" id="firstId">
        <span>Some text here</span>
        </a>
      </div>
      <span>Yet more text</span>
    </div>
   </div>
  </div>
</li>
<li>...same structure as the first li...</li><li>...same structure as the previous two lis</li>
</div>
 

To select:
 
  1. the h3 element: h3

  2. the a element whose class attribute is someSpecialClass: .someSpecialClass

  3. the span element that has ‘Some text here’ as label: .fifthClass

  4. the span element that has ‘Yet more text’ as label:  .fourthClass span

  5. the first li element of the first div: .firstClass li

  6. the second li element of the first div: .firstClass li:nth-child(2)

  7. all div elements whose class attributes contain the string ‘Class’:

  8. the div element having two class attributes, one name 'secondClass' and the second one named 'andThirdClass': .secondClass.andThirdClass

Recent Posts

See All

Creating an Architecture for Your Automated Tests Writing Automated Tests in Small Increments 4 Times Your Automation Passed While Bugs Were Present Now That You’ve Created Automated Tests, Run Them!

This week my newest article was released, this time on how to use Log4j to log relevant test automation information: https://blog.testproject.io/2021/05/05/logging-test-automation-information-with-log

bottom of page