Selectors CSS.

Selectors in CSS.

The selector indicates which element(s) a set of properties relates to. In the example below the character size and text color apply to all h1 tags in the document.

Selectors CSS

Main selectors.

h2 {...}

Selector by tag name.

All elements of this type are affected.

The tag names are not case sensitive: div is equivalent to DIV but the practice has been to write the tags in lowercase.
#logo {...}

Selector by identifier.

The # character introduces an identifier. The item with this ID is affected. In principle this selector only concerns a single element on the page since the ID is supposed to be unique.

Example : img id="logo" src="..."/.

The name of the identifiers is case sensitive: #Edito is therefore different from #edito. Dashes and underlined blanks are accepted, as are numbers, but avoid starting an ID with a number: this confuses some browsers.
.encart {...}

Selector by class.

The point introduces a class. All elements with a class attribute with this value are affected.

Example : img class="logo" src="..."/.

The name of the pseudo-classes is case sensitive. Hyphens and underlined blanks are accepted, as are numbers, but avoid placing a number at the beginning of a class name: This disrupts some browsers.

Several classes can be associated with an HTML element by separating them with a space :
h1 class="titre lexique"

Exemple :

Selectors

Targeted elements

.encart

p class="encart"Targeted elements/p p class="gauche"Not targeted/p p class="Encart"Not targeted (wrong case)/p div class="encart"Targeted elements/div div class="news encart"Targeted elements/div
:hover {...}

Selector by pseudo-class.

The name of the pseudo-classes is case sensitive. Hyphens and underlined blanks are accepted, as are numbers, but avoid placing a number at the beginning of a class name: This disrupts some browsers.

Nothing designates these elements in the HTML code; it's only the context that makes them match the selector. Pseudo-classes are dynamic selectors: elements are only selected at certain times or under certain conditions. Here are some examples of pseudo-classes:
1. :hover: the element that is hovered over by the mouses.
2. :visited: a link when it has already been visited.
3. :checked: a checkbox when checked, or a radio button when selected.
See the full list of pseudo-class.
::first-letter {...}

Selector by pseudo-elements.

The character :: (double colon) introduces a pseudo-element, that is to say an element which is not delimited by tags in the HTML code, but determined according to a rule. Here it will be the first letter of the element text.

Unlike pseudo-classes, elements designated by a pseudo-element are permanently designated. In our example, the first letter will always be the first letter.

See the full list of pseudo-elements.
* {...}

Universal selector.

The * character (star) designates all elements of the document. This selector is difficult to use alone because it destroys the inheritance mechanism by removing inherit values which is the initial value of many properties.

Here is an example. In writing the styles below, the developer clearly intended to choose the font Arial for all elements of the page, except for the titles h1, h2, h3.

If we now place a link (a tag) in one of these titles, we will find Arial, because the a elements have been passed in font Arial by the star selector. Initially the font-family property is set to inherit, which avoids this kind of problem.

* { font-family: "Arial", sans-serif; } h1,h2,h3 { font-family: "Times New Roman", serif; }

The * selector can however be interesting with some rare properties like box-sizing, padding...

It is also interesting in combination with another selector. For example #edito * designates all the children of the element whose ID is edito.
h1, h2, h3, h4 {...}

List of selectors.

List of selectors with comma separator. All elements whose tag appears in the list are affected.
table img {...}

Selectors with inclusion.

Multiple selectors separated by a space. In our example, the selector designates the img elements included in an array. Inclusion is not necessarily direct, there may be intermediate levels: here there will probably be at least elements tr and td between the table tag and the img tag.

With the HTML code below, the first image is not selected because it is not included in an array, while the second and third are fine targeted by the selector.

Example :

Selector

Targeted elements

td>img

p img src="image1.png" / /p table tr td img src="image2.png" /td td a href="..."img src="image3.png"/a /td tr /table
td>img {...}

Selectors with direct inclusion.

Multiple selectors separated by a superior character ( > ) designate direct inclusion. In our example, the selector designates the img elements included in a td cell. td must be the direct parent of img.

With the HTML code below, only the second image is designated by the selector: the first is not included in a cell, and for the third, we find a a element (link) between the cell and the image.

Example :

Selector

Targeted elements

td>img

p img src="image1.png" / /p table tr td img src="image2.png" /td td a href="..."img src="image3.png"/a /td tr /table
h2 + p {...}

Immediate Sibling Selectors.

Multiple selectors separated by a + sign selects elements immediately following another. In the example above, the selector designates the p elements coming immediately after an element h2. p and h2 must have the same parent, hence the name "sibling".

Example :

Selector

Targeted elements

h2 + p

pIntroductory text/p h2Title/h2 pThis is a paragraph..../p pThis is another paragraph...../p
h2 ~ p {...}

Sibling Selectors.

Multiple selectors separated by a sign ~ selects elements that follow another, even if others elements are interposed between. In the example the selector designates the p elements coming after the h2 elements, whether either immediately afterwards, or later. In other words p and h2 must have the same parent.

In the example below, the third paragraph p does not have the same parent as the first two because of the presence of a form tag.

Selector

Targeted elements

h2 ~ p

section pIntroductory text/p h2Title/h2 pFirst paragraph..../p pSecond paragraph..../p formpThird paragraph/p/form /section
div.edito {...}

Combination of selectors.

All these syntaxes can be combined. The example above designates the div blocks containing the edito class.

Be careful with spaces, which can strongly change the meaning of the selector. The div .edito selector (with a space) designates the elements included in a div block and which contain a edito class. Which, in the second example below, doesn't match any element.

Selectors

Targeted elements

div.edito

div class="edito" pBlablabla/p pBlablabla/p /div

div .edito

div class="edito" pBlablabla/p pBlablabla/p /div

Selectors with criterion.

The brackets [ ] introduce a criterion relating to an attribute.

img[ width ] {...}

Selectors on the presence of an attribute.

Designates img elements with a width attribute regardless of the value of the width. We therefore only test the presence of the attribute.

Example :

Selectors

Targeted elements

img[alt]

img src="image1.png" alt="Logo" img src="image3.png" img src="image3.png" alt=""
p[ lang='fr' ] {...}

Selectors with criterion on the value of an attribute.

Here we limit the scope to p elements which include the lang attribute with the value 'fr'.

The recognized comparison operators are :
1. =: strict equality.
2. ~=: contains the word.
3. *=: contains the characters.
4. ^=: starts with the characters.
5. $=: ends with the characters.
Comparisons are case sensitive.

Note: the attributes that can be used in the criteria are not necessarily the HTML standards. It is entirely possible to use your own custom attributes.

Selectors

Targeted elements

img [alt = 'logo']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo"

img [alt ~= 'logo']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo_soc"

img [alt *= 'logo']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo_soc"

img [alt ^= 'logo']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo_soc"

img [alt $= 'logo']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo_soc"

Target images in png format:

img [src $= 'png']

img src="image.png" alt="Logo" img src="image.png" alt="Large logo" img src="image.jpg" alt="logo_soc"

Designate external links

a [href ^= 'http']

a href="page2.php" title="Page 2" a href="https://www.google.com" title="Google" a href="index.htm" title="Index"

Special selectors.

@page {...}

This selector designates the printed page. Few properties can be applied to it: mainly margin and size.

The page selector can be combined with the :left, :right or :first pseudo-elements.

Browser Compatibility.

Current browsers have no problem with basic selectors:

The general selector (*).
Selectors by tags.
Selectors by class.
Selectors by ID.
Operators between selectors (>, space, + ...).
Selectors with [attr="val"] criteria. `

Some recently defined pseudo-classes or pseudo-elements may sometimes not be recognized. Refer to their description to display a compatibility table.

Selectors CSS.

Selectors in CSS.

Main selectors.

Selector by tag name.

Selector by identifier.

Selector by class.

Selector by pseudo-class.

Selector by pseudo-elements.

Universal selector.

List of selectors.

Selectors with inclusion.

Selectors with direct inclusion.

Immediate Sibling Selectors.

Sibling Selectors.

Combination of selectors.

Selectors with criterion.

Selectors on the presence of an attribute.

Selectors with criterion on the value of an attribute.

Special selectors.

Browser Compatibility.