Basic CSS selectors
Selection by tag 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"]
… or only by the beginning of the value, with the operator “^=”. The following code will return the elements whose value of the attribute data-analytics
begins with GMT3
:
[data-analytics^="GMT3"]
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.