Sélecteurs CSS3
On distingue 3 types de sélecteurs :
p {color:red;}
#moi {color:blue;}Les possibilités de CSS2 sont très souvent sous-utilisées voire méconnues, en raison du support déplorable constaté sur IE6 et IE7. Les téléphones mobiles ont en revanche un excellent support en la matière, y compris en CSS3.
[title*="toto"] {
background-color:red;
color:black;
}
[title="toto"] {
background-color:green;
}<h1 title="titi">Le titre</h1>
<h2 title="titototi">le sous-titre</h2>
<p title="toto">le contenu du paragraphe</p>Dans cet exemple la couleur de fond du paragraphe sera celle indiquée par la dernière règle de style (green), car la priorité des deux règles est équivalente, et dans ce cas, la dernière règle rencontrée est la règle appliquée.
frèreadjacent et suivant d'un élément donné : tag1+tag2
frèresuivant un élément donné : tag1~tag2
li.toto~li {background-color:red}<ul><li>bonjour</li>
<li class="toto">S'il vous plaît</li>
<li>Merci</li>
<li>Au revoir</li></ul>html.root h1 {background-color:red}Avec le mixage des espaces de nommage permis et même encouragé par le XML cette règle prend tout son sens. En effet, il est ainsi possible d'avoir un élément html qui ne soit pas racine du document.
enfantd'un élément : tag:first-child.
enfantd'un élément : tag:last-child.
enfantdu même type : tag:first-of-type,
enfantdu même type : tag:last-of-type.
Aussi bizarre que cela puisse paraître, la pseudo-classe last-child ne fait pas partie des spécification CSS2.
Il est ainsi possible de contrôler la couleur des éléments d'un tableau en exprimant par exemple : Toutes les six lignes mettre en rouge clair les trois premières lignes et, en jaune les trois lignes suivantes, et ce en partant de l'avant-dernière ligne.
Il faut voir n comme une valeur s'incrémentant indéfiniment avec une période indiquée par la valeur en préfixe. Ainsi 6n+3 n'incrémentera n que pour les valeurs 6, 12, 18... tandis que 3 sélectionnera la phase, c'est à dire les éléments 3, 9, 15...
La phase par défaut est égale à 0.
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {background-color:red}<table>
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
<tr><td>3,1</td><td>3,2</td></tr>
<tr><td>4,1</td><td>4,2</td></tr>
<tr><td>5,1</td><td>5,2</td></tr>
<tr><td>6,1</td><td>6,2</td></tr>
<tr><td>7,1</td><td>7,2</td></tr>
</table>enfant unique.
enfant uniquedu même type.
em:only-child {background-color:red}
strong:only-of-type {background-color:green}<h1>test sur <strong>les sélecteurs</strong>
d'<q>enfants</q> uniques.</h1>
<p>voici un <em>texte qui devrait
être sur fond rouge<em></p>*:target {background-color:green}<h1>test sur <strong id="la_cible">les
sélecteurs</strong> de <q>target</q>.</h1>
<p>voici un lien sur
<a href="#la_cible">la cible</a></p>L'état indéterminé
se présente souvent lors du chargement d'une page contenant plusieurs radios boutons dont aucun n'est initialisé.
p::selection {
background-color:red;
}*:contains("bonjour") {background-color:green}<h1>test sur le contenu.</h1>
<p>voici un paragraphe contenant du texte
avec le mot <strong>bon</strong>jour</p>p:not(.ma_classe) {background-color:#FCC}
*:not(em) {background-color:#F00}
Il est par exemple inutile de réaliser coté serveur une technique de coloration en alternance sur lignes paires/impaires, une pseudo-classe dédiée à ce traitement étant définie.