Je vais essayer de lister les différents sélecteurs disponible avec le langage de style CSS. Cette liste n’est pas exhaustive mais représente un panel intéressant de sélecteurs.
Présentation du CSS3
Pour commencer, la spécification du langage CSS3 n’étant pas encore, elle n’est pas encore prise en compte par tous les navigateurs.
Vous pouvez consulter la spécification CSS3 en suivant le lien suivant : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html. La liste des sélecteurs pris en compte par le CSS3 se trouve à l’adresse suivante : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors.
Le CSS3 conserve certains sélecteurs de la spécification du CSS2, qui ont été pris en compte très tardivement par les différents navigateurs.
Sélecteurs de contenu générés CSS3
Ces sélecteurs permettent de rajouter du texte dans les éléments du DOM de la page et sont au nombre de deux : :after et :before.
Il est possible de rajouter du texte, le contenu des balises de l’élément courant ou des images. Pour illustrer ces différentes utilisations, rien ne sert de ré-inventer la roue, je vous invite à consulter ce post qui propose quelques exemples concrets.
Il est également possible de réaliser des compteurs.
Les compteurs : counter-reset et counter-increment
Pour utiliser un compteur il faut définir un élément de base qui permettra de réinitialiser le compteur. Nous allons pour l’exemple utiliser le conteneur du site (identifiant : content) et lui affecté le style counter-reset: titrelist; où titrelist est le nom du compteur.
<style type="text/css">
#content { counter-reset: titrelist; }
#content h1:before {
content:counter(titrecp ". ");
counter-increment: titrelist;
}
</style>
<div id="content">
<h1>Test titre 1</h1>
<ul>
<li>Accueil</li>
<li>Articles</li>
<li>Contact</li>
</ul>
<h1>Test titre 2</h1>
<p>Paragraphe</p>
</div>Avec ce code source, un compteur apparaîtra devant chaque titre h1 de la forme : [NUMERO]. [TITRE H1]
Le sélecteur d’exclusion : not()
Ce sélecteur permet d’exclure un élément de la sélection. Il s’utilise de la forme suivante: element:not({selecteur}).
<style type="text/css">
#content li:not(.help) {
color:red;
}
</style>
<div id="content">
<h1>Test titre 1</h1>
<ul>
<li>Accueil</li>
<li>Articles</li>
<li class="help">Contact</li>
</ul>
</div>Bon dév’
