Les sélecteurs css

Dans un premier temps reprenons les sélecteurs disponibles sous css2 puis les nouveautés en css3.

1) Cette table résume la syntaxe du sélecteur de CSS2 :

Motif Signification Décrit au chapitre…
* Correspond à tout élément. Sélecteur universel
E Correspond à tout élément E (c.à.d., un élément de type E). Sélecteurs de type
E F Correspond à tout élément F qui est un descendant de l’élément E. Sélecteurs descendants
E > F Correspond à tout élément F aussi un enfant de l’élément E. Sélecteurs d’enfant
E:first-child Correspond à un élément E aussi le premier enfant de son élément parent. La pseudo-classe :first-child
E:link
E:visited
Correspond à un élément E qui est une ancre dans la source dont le lien n’a pas été visité (:link) ou bien l’a déjà été (:visited). Les pseudo-classes de lien
E:active
E:hover
E:focus
Correspond à l’élément E au cours de certaines actions de l’utilisateur. Les pseudo-classes dynamiques
E:lang(c) Correspond à l’élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document). La pseudo-classe :lang()
E + F Correspond à tout élément F immédiatement précédé par un élément E. Les sélecteurs adjacents
E[foo] Correspond à tout élément E avec l’attribut « foo » (quelles qu’en soient les valeurs). Sélecteurs d’attribut
E[foo= »warning »] Correspond à tout élément E dont l’attribut « foo » a exactement la valeur « warning ». Sélecteurs d’attribut
E[foo~= »warning »] Correspond à tout élément E dont l’attribut « foo » a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est « warning ». Sélecteurs d’attribut
E[lang|= »en »] Correspond à tout élément E dont l’attribut « lang » a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par « en ». Sélecteurs d’attribut
DIV.warning Seulement en HTML. Identique à DIV[class~= »warning »]. Sélecteurs de classe
E#myid Correspond à tout élément E dont l’ID est « myid ». Sélecteurs d’ID

2) Séléceurs bien pratiques en css3:

Sélecteur     :nth-child(xn+y)

<style>
ul li:nth-child(0n+3) {
font-weight: bolder;
}
ul li:nth-child(2n) {
color: red;
}
</style>
 

Donnera dans la liste suivante:

 
<ul>
<li>Element</li>
<li>Element rouge</li>
<li>Element en gras</li>
<li>Element rouge</li>
<li>Element</li>
<li>Element rouge</li>
<li>Element</li>
</ul>

Sélecteur     :nth-of-type(xn+y)

<style>
div p:nth-of-type(2){
font-weight: bolder;
}
</style>
 
<div>
<p>paragraphe normal</p>
<p>paragraphe en gras</p>
</div>

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s