CSS selectors for test automation - selector types and syntax

What is selector in CSS - it's a description of the element (or group of elements) that shows your web browser what element should be selected to apply some styling. Let's go through the main types of CSS selectors.

1) .Х or [class="X"]

.topic-title {
    background-color: yellow;
}

CSS selector by class Х. The difference between the id and class is that while several elements on the page can have the same class, an id is always unique and should be used only for one element on the page. So in brief:

Classes should be used to apply the same style to several elements
Id should be used to apply the style to one particular element

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

2) #X or [id="X"]

#content {
    width: 960px;
    margin: 0 auto;
}

CSS selector by id. The number sign (hash, or pound sign) in front of the CSS selector X selects an element that has an id that equals X. While adding styles by id you should always keep in mind that this id should be unique - only one such id should be present on the page. Therefore, it is better to use selectors by classes, combinations of classes or tag names. However, selectors by id are perfectly used in test automation, because they allow you to target a desired element and have confidence that there is only one such element on the page.

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

3) *

* {
    margin: 0;
    padding: 0;
}

CSS selector for all elements. An asterisk character chooses all the items that are on the page. Many developers use it in order to remove (reset) the values of indents (margin and padding) for all elements on the page. Nevertheless, in practice it is better not to do that because this CSS selector is quite heavy for a browser (as it has to loop through each and every item on the page).

The * symbol can also be used to highlight all child elements:

#header * {
    border: 5px solid grey;
}

In this example, all child elements (descendants) of the element with id header are targeted. But it is always worth remembering that this selector is quite heavyweight.

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

4) X

a {
    color: green;
}
ol {
    margin-left: 15px;
}

CSS selector by type. How to choose all elements of the same type, if they do not have any ids or classes? Try using CSS selector by element type. For example, to select all ordered lists on the page, use the ol {...} as shown above.

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

5) Х Y

li a {
    font-weight: bold;
    text-decoration: none;
}

CSS selector of all descendants or CSS selector of all child elements is one of the most widespread. It is used if you need to select the elements of a certain type from a number of child elements. For example, apply it if you need to highlight all links that are inside a li element. While using chains of such selectors, always ask yourself - is it possible to target an element by writing a shorter sequence of selectors?

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

6) Х + Y

div + p {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
}

The adjacent element selector selects only the element of type Y, which goes immediately after the element X. In this case, each paragraph that goes immediately after each div element will receive a specified font-family and font-size.

Supported by browsers:

IE7+
Firefox
Chrome
Safari
Chrome

7) Х > Y

#content > ul {
    border: 1px solid green;
}

CSS selector of direct descendants. The difference between selectors X Y and X > Y is that the latter will select only direct subsidiaries (in other words it will choose only direct descendants). For instance:

<div id="content">
    <ul>
        <li>List element
            <ul>
                <li>Descendant of the first li element</li>
            </ul>
        </li>
        <li>List element</li>
        <li>List element</li>
    </ul>
</div>

CSS selector #content > ul will pick only a ul that is a direct descendant of div with id="container". It will ignore a ul that is a descendant of the first li. This CSS selector is rather fast and lightweight.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

8) Х ~ Y

ol ~ p {
    margin-left: 10px;
}

Sister (sibling) elements selector is less strict than X + Y. It will target not only the first, but all p elements that go after ol.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

9) X:visited and X:link

a:link {
    color: green;
}
a:visited {
    color: grey;
}

CSS selector by pseudo-class link is used to target all links that were not clicked. If you want to target all clicked links - use pseudo class visited.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

10) X[title]

a[title] {
    color: red;
}

CSS selector by attribute. In the example above we target only links that have attribute title.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

11) X[href="foo"]

a[href="https://www.stijit.com/"] {
    color: yellow;
}

CSS selector by attribute value that equals to something. Only links with attribute href that equals https://www.stijit.com/ will be targeted and will become yellow.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

12) X[href*="stijit"]

a[href*="stijit"] {
    color: #dfc11f;
}

CSS selector by attribute value that contains something. Star symbol * means that a value should be somewhere in the attribute of the element (for example in any part of the href attribute). This way all links with https://www.stijit.com/, www.stijit.com and stijit.com will be targeted.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

13) X[href^="http"]

a[href^="http"] {
    background: url(path/to/external/icon.png) no-repeat;
    padding-left: 15px;
}

CSS selector by attribute value that starts with something. Sometimes on some websites you can observe links with small arrow icons near them (to indicate that the link is external). Caret symbol ^ means the beginning of a string. This way all links that have href beginning with http will be targeted.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

14) X[href$=".jpg"]

a[href$=".jpg"] {
    color: green;
}

CSS selector by attribute value that ends with something. Here dollar symbol $ is used to capture the end of string. This way all links that have href attribute ending with .jpg (lead to jpg images) will be targeted.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

15) X[data-*="foo"]

a[data-filetype="image"] {
    color: green;
}

CSS selector by custom attribute. For example targets all links that have a custom data-filetype attribute that equals image.

<a href="path/to/image.jpg" data-filetype="image">Link</a>

This way all links that lead to any images can be targeted.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

16) X[foo~="bar"]

CSS selector by attribute value divided by spaces. Tilde symbol ~ is used to target elements that have a particular attribute value divided by spaces. For example if an element has data-info attribute that has several values divided by spaces:

<a href="path/to/image.jpg" data-info="external image">Link</a>

Now using ~ symbol we can select elements with particular words inside attribute values:

Select element with data-info containing a word external:
```
a[data-info~="external"] {
    color: green;
}
```
Target element with the image word inside data-info attribute:
```
a[data-info~="image"] {
    border: 2px dashed black;
}
```

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera

17) X:checked

input[type=radio]:checked {
    border: 3px outset black;
}

CSS selector by pseudo-class checked. This pseudo class will target only checkbox or radio button elements and only when they are already in the checked state.

Supported by browsers:

IE9+
Chrome
Firefox
Safari
Opera

18) X:after

CSS selector by pseudo-class after. Pseudo classes :before and :after are used to create content before and after the selected element.

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
    *display: inline-block;
    _height: 1%;
}

Here pseudo-class :after following the element with class clearfix creates an empty string and then it gets cleared. This approach is used in cases where overflow: hidden can not be utilized.

Supported by browsers:

IE8+
Chrome
Firefox
Safari
Opera

19) X:hover

div:hover {
    background-color: rgba(11,77,130,0.5);
}

CSS selector by pseudo-class hover. Pseudo class :hover is used to apply styles to the element when it gets hovered by mouse pointer. Old versions of Internet Explorer apply :hover only to the links.

a:hover {
    border-bottom: 1px dotted blue;
}

Supported by browsers:

IE6+ (В IE6 применимо только к ссылкам)
Chrome
Firefox
Safari
Opera

20) X:not(selector)

div:not(#content) {
    color: grey;
}

CSS selector by pseudo-class not (negation) can be used for example to target all div elements except divs that have id="content".

The same way all elements except p can be selected:

*:not(p) {
    color: blue;
}

Supported by browsers:

IE9+
Chrome
Firefox
Safari
Opera

21) X::pseudoElement

p::first-line {
    font-weight: bold;
    font-size: 24px;
}

CSS selector by pseudo-element. Pseudo elements are used to apply styles to the fragments of the elements - for example to the first line of a paragraph or the first letter of a word. It can be applied to the block elements only.

Selection of the first line of a paragraph:

p::first-line {
    font-size: 28px;
    font-weight: bold;
}

Targeting the first letter of a word:

p::first-letter {
    font-family: cursive;
    font-size: 30px;
    font-weight: bold;
    padding-right: 1px;
}

Supported by browsers:

IE6+
Chrome
Firefox
Safari
Opera

22) X:first-child

ul li:first-child {
    border-top: none;
}

CSS selector by pseudo-class first-child selects only the first descendant of a parent element. It is often used to remove a border for the first element of a list. This pseudo class was available starting from CSS 1.

Supported by browsers:

IE7+
Chrome
Firefox
Safari
Opera 3.5+
Android
iOS

23) X:last-child

ul > li:last-child {
    border-bottom: none;
}

CSS selector by pseudo-class last-child targets the last descendant of a parent element. It is available starting from CSS 3.

Supported by browsers:

IE9+ (IE8 supports first-child, but not the last-child. Microsoft (с))
Chrome
Firefox
Safari
Opera 9.6+
Android
iOS

24) X:only-child

div p:only-child {
    color: green;
}

CSS selector by pseudo-class only-child selects elements that are the only descendants of a parent element.

Supported by browsers:

IE9+
Chrome
Firefox
Safari 3.0+
Opera 9.6+
Android
iOS

25) X:nth-child(n)

li:nth-child(3) {
    color: black;
}

CSS selector by pseudo-class nth-child targets a child element by number provided as a parameter. Selector nth-child accepts an integer as a parameter (starting from 1, so to select a second item in a list use li:nth-child(2)). All pseudo classes with nth-child are available starting from CSS 3.

Supported by browsers:

IE9+
Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

26) X:nth-last-child(n)

li:nth-last-child(2) {
    color: red;
}

CSS selector by pseudo-class nth-last-child. What if you have a long list of li elements inside ul and you need to target the third li from the end of the list? Instead of something like li:nth-child(109) you can use a last elements selector - nth-last-child. This pseudo class works the same as nth-child, but starts counting from the end instead of the beginning.

Supported by browsers:

IE9+
Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

27) X:nth-of-type(n)

ul:nth-of-type(3) {
    border: 1px dotted black;
}

CSS selector by pseudo-class nth-of-type. In case if you have four unordered lists on a page and you have to target only the third of them - use :nth-of-type(3).

Supported by browsers:

IE9+
Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

28) X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
    border: 2px ridge blue;
}

CSS selector by pseudo-class nth-last-of-type(n) is used to select n-th element of a particular type starting from the end.

Supported by browsers:

IE9+
Chrome
Firefox 3.6+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

29) X:only-of-type

li:only-of-type {
    font-weight: bold;
}

CSS selector by pseudo-class only-of-type targets elements that do not have any siblings of the same type. For example li will be selected, but only if it is the only li element inside its parent ul.

Supported by browsers:

IE9+
Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.6+
Android 2.1+
iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) {
    font-style: italic;
}

CSS selector by pseudo-class first-of-type selects the first element of a particular type.

Supported by browsers:

IE9+
Chrome
Firefox 3.5+
Safari 3.1+
Opera 9.5+
Android 2.1+
iOS 2.0+