Complément sur l'écriture des sélecteurs CSS

Après avoir vu comment décrire un sélecteur et ses règles, ainsi que les différents types de sélecteur, ajoutons quelques informations complémentaires...

Bien viser !

Pour viser un type d'objet de la classe "maclasse":

objet.maclasse

Par exemple, pour l'objet paragraphe:

p.maclasse {

color:red;

}

Attention à l'écriture, ajouter un espace entre l'objet et .classe n'aura pas la même signification que objet.classe !

Voilà, voilà, maintenant que j'ai fait peur...

Reprennons notre exemple avec un objet paragraphe p et ma classe maclasse.

Si vous écrivez p.maclasse, vous viserez les objets p de la classe maclasse.

Si vous écrivez p .maclasse (notez bien l'espace entre p et .maclasse), vous viserez cette fois-ci les objets de la classe "maclasse" qui se trouvent déclarés entre <p> et </p> ou, si vous préférez, les objets de .maclasse à l'intérieur de paragraphe p (ce qui revient au même).

Dans le même style d'écriture, vous pouvez écrire:

ul.maclasse a {

...

}

soit lien a contenu dans les objets ul de la classe maclasse...

body div.container div.content p qui se lira les paragraphes p qui sont dans div.content qui sont eux même dans div.container de body. Le problème avec cette écriture, c'est que tous les paragraphes seront impactés, même ceux qui se trouveront dans des balises de niveau inférieur à div.content. Pour ce limiter aux balises p directement présentes sous div.content, nous utiliseront le > comme suit:

body div.container div.content > p

CSS conditionnel

Plus rigolot, votre sélecteur pourra être conditionnel !

Vous pourrez en appliquer des règles en sélectionnant un objet par son attribut:

objet[attribut condition 'valeur']

Par exemple, tous les paragraphes dont la taille est de 25:

p[size='25']

Cela marche aussi avec une classe comme attribut par exemple p[class='test'] mais c'est évidemment stupide de faire cela autant utiliser p.test