Introduction
Most User scenario actions apply to elements present in your web pages, that you need to accurately pinpoint. In the following HTML code snippets, there are for example three elements: a division <div>
, a paragraph <p>
and a link <a>
<div> <p> Click <a href="page.html" class="myClass" id="myId">here</a> </p> </div>
To accurately target an element, Speed Analysis Lab provides different selection modes: TAG (for example “p”), IDENTIFIER ("myIdentifier"), NAME (used in web forms), XPATH and CSS.
CSS selection is the most versatile and comprehensive element selection mode within a web page (apart from XPATH, which is powerful but also complex, and not very used by web professionals). A CSS selector can, on its own, reproduce nearly all the other selection modes: TAG, IDENTIFIER, NAME and go even further.
The purpose of this section of documentation is to familiarize you with the possibilities offered by this selection method.
Using Chrome DevTools
Our service is based on Chrome, a popular browser. To test your CSS selectors as in Speed Analysis Lab, open the relevant page in Chrome and use the developer tools integrated in this browser using Ctrl + Shift + I on Windows, or ⎇ + ⌘ + I on macOS.
The HTML code is visible via the “Elements” tab (NB: this the Document Object Model, or DOM. It represents HTML source code of the page as understood by the browser, and after the execution of the page JavaScript code that may have modified it).
Elements on hover
When hovering over an element in the page, it will appear highlighted in the “Elements” tab. Similarly, by hovering over an element in the “Elements” tab, it will be highlighted in the web page.
Selectors search
In Dev Tools, using Ctrl + F displays a search bar. You can enter a CSS selector in this search bar to check it. The number of results obtained will be indicated in the search bar. The first found element will be highlighted in the code:
Copying browser-generated selectors
By right-clicking on an item in the “Elements” tab, you can choose “Copy”, then “Copy the selector”. A CSS selector will be copied to your clipboard, which you can use in Speed Analysis Lab.
Be careful though, this selector will often be very specific, and therefore not very robust to change. You may need to upgrade this selector regularly. However, it can be used as a basis for determining a more appropriate selector.
HTML code and Vocabulary
In the following example:
<div> <p> <a href="page.html" class="myClass secondClass" id="myIdentifier">My link</a> </p> </div>
<a>
is an html element composed of an opening<a>
and closing</a>
tag.href
,class
andid
are attributes of the element<a>
.- “page.html” is the value of the attribute
href
. <p>
is a direct parent element of the<a>
element.<div>
is an indirect parent element of the<a>
element.
An HTML element can have one or more classes (in the class
attribute, separated by spaces). Several different elements may have the same class or common classes.
An HTML element can have an identifier (the id
attribute). An Identifier is unique, two elements cannot have the same identifier (in the field, this may happen but it is an error that can lead to edge effects). Duplicated identifiers will be indicated in our detailed analysis reports.
Basic CSS Selectors
Selection tag by name
To select one or more elements by their tag, use the tag name directly like a
, span
, div
, header
.
Selection by one or more classes
To select one or more elements by one of their classes, use the name of the class preceded by a period “.”.
Example:
.myClass
You can refine your selection by specifying other classes that the element must have, always prefixed with a “.”, attached to the previous class.
.myClass.secondClass
Selection by the presence of an attribute
To select an element or elements that have a certain attribute, you must define the relevant attribute between square brackets “[ ]”.
Example:
a[download]
Selects all links with a download
attribute.
Selection by the value of an attribute
To select an element or elements that have a certain attribute, you must define the relevant attribute and its value between square brackets “[ ]”.
Example:
[data-analytics="GMT324-3"]
Selection from a part of the value of an attribute
On some sites, part of the attributes are automatically generated and may change with each release For example:
<p id="clientP-4D92J_keyPId"/>
If you need to target this element with:
- the beginning with the value, use the operator "^="
Example:
[id^="clientP-"]
- the ending of the value, use the operator "$="
Example:[id$="keyPId"]
-
any text contained in the value, use the operator "*="
Example:[id*="ntP-4D92J_k"]
Selection of an element by its identifier
To select an element by its unique identifier, use the name of the identifier preceded by a hash “#”.
#myId
An identifier is normally unique, so this selector is expected to return only one element. You should therefore not attach several identifiers.
Selector composition
You can compose simple selection modes to refine your selectors. Thus, to select an element by its tag and one of the classes it contains, you can use:
a.myClasse
The identifier being the most accurate selector, it is always at the beginning of the declaration and is often sufficient on its own.
Selection of elements located in other elements
The selector of the parent(s) and child(ren) is separated by a space. The parent(s) can then be direct or indirect parents.
div a
All the <a>
elements that have a <div>
parent element.
.parent .child
All elements with the child
class that have as parent an element with the parent
class.
#parent .child
All elements with the child
class that are contained in the parent, necessarily unique, with the identifier parent
.
#header div span a
Any link that has a <span>
parent that itself has a <div>
parent, contained in a parent element that have a header
identifier.
<div id="header"> <div> <span><strong><a href="#">Link addressed by the selector</a></strong></span> </div> <span><a href="#">Link not addressed by the selector</a></span> </div>
Reminder: the child is not necessarily a direct child of the parent.
Advanced CSS Selectors
Selection of a direct child element
#parent > .child
Select the elements with the class child
that are direct children of the element with the identifier parent
.
Use case: several nested elements - e. g. menus - but only the first level is selected.
Selection of an adjacent element (or sibling element)
.abel + .cain
We select the elements with the class cain
that follow elements with the class abel
.
Use case: try to select an element that is systematically after another, but difficult to point effectively by itself.
Selection of the n-th element (of an implicit direct parent)
To select an element by its position within its parent, you can use :nth-child()
(means “n-th child element”) with, as a parameter, the position of the element to select.
Example:
a:nth-child(2)
Selects all the links that are the second child of their direct parent.
Selection of an element with exclusion
To select an item provided it does not match another simple selector, you can use :not()
with the selector to exclude as a parameter.
Example:
a:not(.excluded)
Selects all links that do not have the exclude
class.
Other selectors
There are many CSS selectors and new ones are regularly added: we recommend