Les sélecteurs CSS.

Les sélecteurs en CSS.

Le sélecteur indique à quel(s) élément(s) se rapporte un ensemble de propriétés. Dans l'exemple ci-dessous la taille des caractères et la couleur du texte s'appliquent à toutes les balises h1 du document.

Sélecteurs CSS

Principaux sélecteurs.

h2 {...}

Sélecteur par nom de balise.

Tous les éléments de ce nom sont concernés.

Les noms des balises ne sont pas sensibles à la casse : div est équivalent à DIV mais l'habitude a été prise d'écrire les balises en minuscules.
#logo {...}

Sélecteur par identifiant.

Le caractère # introduit un identifiant. L'élément comportant cet ID est concerné. En principe ce sélecteur ne concerne qu'un seul élément dans la page puisque l'id est censé être unique.

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

Le nom des identifiants est sensible à la casse : #Edito est donc différent de #edito. Les tirets et les blancs soulignés sont acceptés , ainsi que les chiffres, mais éviter de commencer un ID par un chiffre : cela perturbe certains navigateurs.
.encart {...}

Sélecteur par classe.

Le point introduit une classe. Tous les éléments comportant un attribut class avec cette valeur sont concernés.

Le nom des classe est sensible à la casse. Les tirets et les blancs soulignés sont acceptés , ainsi que les chiffres, mais éviter de placer un chiffre au début d'un nom de classe : cela perturbe certains navigateurs.

Plusieurs classes peuvent être associées à un élément HTML en les séparant par un espace :
h1 class="titre lexique"

Exemple :

Sélecteurs

Éléments désignés

.encart

p class="encart"Élément sélectionné/p p class="gauche"Non sélectionné/p p class="Encart"Non sélectionné (casse)/p div class="encart"Élément sélectionné/div div class="news encart"Élément sélectionné/div
:hover {...}

Sélecteur par pseudo-classe.

Le caractère : (deux points) introduit une pseudo-classe.
La pseudo-classe désigne un élément lorsqu'il se trouve dans une certaine situation ou un certain état : ici lorsqu'il est survolé par la souris.

Rien ne désigne ces éléments dans le code HTML ; c'est uniquement le contexte qui les fait correspondre au sélecteur. Les pseudo-classes sont des sélecteurs dynamiques : les éléments ne sont sélectionnés que à certains moments ou sous certaines conditions. Voici quelques exemples de pseudo-classes :
1. :hover : l'élément qui est survolé par la souris.
2. :visited : un lien lorsqu'il a déjà été visité.
3. :checked : une case à cocher lorsqu'elle est cochée, ou un bouton radio lorsqu'il est sélectionné.
Voir la liste complète des pseudo-class.
::first-letter {...}

Sélecteur par pseudo-éléments.

Le caractère :: (double deux points) introduit un pseudo-élément, c'est à dire un élément qui n'est pas délimité par des balises dans le code HTML, mais déterminé suivant une règle. Ici il s'agira de la première lettre du texte de l'élément.

Contrairement aux pseudo-classes, les éléments désignés par un pseudo-élément le sont en permanence. Dans notre exemple, la première lettre sera toujours la première lettre.

Voir la liste complète des pseudo-elements.
* {...}

Sélecteur universel.

Le caractère * (étoile) désigne tous les éléments du document. Ce sélecteur est délicat à utiliser seul car il détruit le mécanisme d'héritage en supprimant les valeurs inherit qui est la valeur initiale de nombreuses propriétés.

Voici un exemple. En écrivant les styles ci-dessous, le développeur avait manifestement l'intention de choisir la police Arial pour tous les éléments de la page, sauf pour les titres h1, h2, h3.

Si maintenant on place un lien (balise a) dans un de ces titres, on va retrouver de l'Arial, car les éléments a ont été passés en police Arial par le sélecteur étoile. Initialement la propriété font-family a la valeur inherit, ce qui évite ce genre de problème.

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

Le sélecteur * peut cependant être intéressant avec quelques rares propriétés comme box-sizing, padding...

Il est également intéressant en combinaison avec un autre sélecteur. Par exemple #edito * désigne tous les enfants de l'élément dont l'ID est edito.
h1, h2, h3, h4 {...}

Liste de sélecteurs.

Liste de sélecteurs avec la virgule comme séparateur. Tous les éléments dont la balise figure dans la liste sont concernés.
table img {...}

Sélecteurs avec inclusion.

Plusieurs sélecteurs séparés par un espace. dans notre exemple, le sélecteur désigne les éléments img inclus dans un tableau. L'inclusion n'est pas forcément directe, il peut exister des niveaux intermédiaires : ici il y aura probablement au moins des éléments tr et td entre la balise table et la balise img.

Avec le code HTML ci-dessous, la première image n'est pas sélectionnée car elle n'est pas incluse dans un tableau, tandis que la deuxième et la troisième sont bien ciblées par le sélecteur.

Exemple :

Sélecteur

Éléments ciblés

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 {...}

Sélecteurs avec inclusion directe.

Plusieurs sélecteurs séparés par un caractère supérieur ( > ) désignent une inclusion directe. Dans notre exemple, le sélecteur désigne les éléments img inclus dans une cellule td. td devant être le parent direct de img.

Avec le code HTML ci-dessous, seule la deuxième image est désignée par le sélecteur : la première n'est pas incluse dans une cellule, et pour la troisième, on trouve un élément a (lien) entre la cellule et l'image.

Exemple :

Sélecteur

Éléments ciblés

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 {...}

Sélecteurs de fratrie immédiate.

Plusieurs sélecteurs séparés par un signe + sélectionne les éléments qui suivent immédiatement un autre. Dans l'exemple ci-dessus, le sélecteur désigne les éléments p venant immédiatement après un élément h2. p et h2 doivent avoir le même parent, d'où le nom de "fratrie".

Exemple :

Sélecteur

Éléments ciblés

h2 + p

pTexte d'introduction/p h2Titre/h2 pCeci est un paragraphe..../p pCeci est un autre paragraphe...../p
h2 ~ p {...}

Sélecteurs de fratrie.

Plusieurs sélecteurs séparés par un signe ~ sélectionne les éléments qui suivent un autre, même si d'autres éléments s'intercalent entre. Dans l'exemple le sélecteur désigne les éléments p venant après les éléments h2, que ce soit tout de suite après, ou plus tard. Autrement dit p et h2 doivent avoir le même parent.

dans l'exemple ci-dessous, le troisième paragraphe p n'a pas le même parent que les deux premiers à cause de la présence d'une balise form.

Sélecteur

Éléments ciblés

h2 ~ p

section pTexte d'introduction/p h2Titre/h2 pPemier paragraphe..../p pDeuxième paragraphe..../p formpTroisième paragraphe/p/form /section
div.edito {...}

Combinaison de sélecteurs.

Toutes ces syntaxes sont cumulables. L'exemple ci-dessus désigne les blocs div comportant la classe edito.

Attention aux espaces, qui peuvent changer fortement la signification du sélecteur. Le sélecteur div .edito (avec un espace) désignent les éléments inclus dans un bloc div et qui comportent une classe edito. Ce qui, dans le deuxième exemple ci-dessous, ne correspond à aucun élément.

Sélecteurs

Éléments ciblés

div.edito

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

div .edito

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

Sélecteurs avec critère.

Les crochets [ ] introduisent un critère portant sur un attribut.

img[ width ] {...}

Sélecteurs sur la présence d'un attribut.

Désigne les éléments img comportant un attribut width quelle que soit la valeur de ce dernier. On teste donc seulement la présence de l'attribut.

Exemple :

Sélecteurs

Éléments ciblés

img[alt]

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

Sélecteurs avec critère sur la valeur d'un attribut.

Ici on limite la portée aux éléments p qui comportent l'attribut lang avec la valeur 'fr'.

Les opérateurs de comparaison reconnus sont :
1. = : égalité stricte.
2. ~= : contient le mot.
3. *= : contient les caractères.
4. ^= : commence par les caractères.
5. $= : se termine par les caractères.
Les comparaisons sont sensibles à la casse.

Remarque : les attributs utilisables dans les critères ne sont pas forcément les standard du HTML. Il est tout à fait possible d'utiliser ses propres attributs personnalisés.

Sélecteurs

Élément(s) ciblé(s)

img [alt = 'logo']

img src="image.png" alt="Logo"/ img src="image.png" alt="Grand logo"/ img src="image.jpg" alt="logo"/

img [alt ~= 'logo']

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

img [alt *= 'logo']

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

img [alt ^= 'logo']

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

img [alt $= 'logo']

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

Désigner les images au format png

img [src $= 'png']

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

Désigner les liens externes

a [href ^= 'http']

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

Sélecteurs particuliers.

@page {...}

Ce sélecteur désigne la page imprimée. Peu de propriétés peuvent lui être appliquées : essentiellement margin et size.

Le sélecteur page peut être combiné avec les pseudo-éléments :left, :right ou :first.

Compatibilité des navigateurs.

Les navigateurs actuels ne posent aucun problème avec les sélecteurs de base :

Le sélecteur général (*).
Les sélecteurs par balises.
Les sélecteur par classe.
Les sélecteurs par id.
Les opérateurs entre sélecteurs (>, espace, + ...).
Les sélecteurs avec critère [attr="val"]. `

Certaines pseudo-classes ou certains pseudo-éléments récemment définis peuvent parfois ne pas être reconnus. Reportez-vous à leur description pour afficher un tableau de compatibilité.

Une remarque ? Une suggestion ?...

Les sélecteurs CSS.

Les sélecteurs en CSS.

Principaux sélecteurs.

Sélecteur par nom de balise.

Sélecteur par identifiant.

Sélecteur par classe.

Sélecteur par pseudo-classe.

Sélecteur par pseudo-éléments.

Sélecteur universel.

Liste de sélecteurs.

Sélecteurs avec inclusion.

Sélecteurs avec inclusion directe.

Sélecteurs de fratrie immédiate.

Sélecteurs de fratrie.

Combinaison de sélecteurs.

Sélecteurs avec critère.

Sélecteurs sur la présence d'un attribut.

Sélecteurs avec critère sur la valeur d'un attribut.

Sélecteurs particuliers.

Compatibilité des navigateurs.