Les sélecteurs de style

Noter ce cours :

Liens sponsorisés :

Un sélecteur contextuel possède une syntaxe très proche de celle d'un sélecteur classique. La seule différence est que le style prend effet sur une balise contenue dans une autre (qu'elle soit directement contenue ou non).

Exemple pour un style appliqué à la balise <span> contenue dans la balise <li> :

li span{
color:#000000;
text-align:left;
}

Un sélecteur descendant revient sensiblement au même, il permet d'appliquer un style sur une balise située à l'intérieur d'une autre, mais directement. Ainsi l'exemple suivant fonctionnera pour ce code :

<li><span>test</span></li> mais pas pour celui-ci : <li><p><span>test</span></p></li> car la balise <span> n'est pas directement située dans la balise <li>.

Exemple pour un style appliqué à la balise <span> contenue directement dans la balise <li> :

li > span{
color:#000000;
text-align:left;
}

Un sélecteur adjacent permet d'appliquer un style sur une balise située immédiatement après une autre. Dans notre exemple nous allons appliquer un effet sur la balise <h1>

Exemple pour un style appliqué à la balise <h1> contenue dans le document et située juste après la balise <p> :

p + h1{
color:#000000;
text-align:left;
}

Les sélecteurs d'attributs permettent d'appliquer un style sur une balise contenant des attributs précis ou imprécis.

Exemple pour un style appliqué à la balise <p> contenant l'attribut align (avec ou sans valeur) :

p[align]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit être égale à center :

p[align="center"]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit s'approcher de center :

p[align~="center"]{
color:#000000;
text-align:center;
}

Exemple pour un style appliqué à la balise <p> contenant l'attribut align dont la valeur doit commencer par left :

p[align|="left"]{
color:#000000;
text-align:center;
}