Les espaces de noms (namespace)

 namespace|div { color: red }

Une des grandes nouveautés apportées par cette nouvelle version est la gestion des espaces de noms. Les programmeurs sauront de quoi je parle. Pour faire simple, on peut définir un espace de nom particulier et n'appliquer des propriétés qu'aux balises dans cet espace de nom.

Exemple :
Définissons un espace de nom pour une page particulière :

Code:

@namespace produits url(http://www.monsite.com/produits.html);

Puis un espace de nom pour une autre page :

Code:

@namespace membre url(http://www.monsite.com/membre.html);

Il est désormais possible d'appliquer des modifications qui ne seront spécifiques qu'à ces pages :

Code:

/* propriétés qui ne seront appliqués que sur les balises h1 de la page définie par l'espace de nom "produits"*/
produits|h1 { color: red }

/* uniquement les balises h1 dans la page définie par "membre"
membre|h1 { color: red }

/* uniquement les balises h1 qui ne sont PAS dans un espace de nom (donc autre que dans les pages définies plus haut */
|h1 { color: red }

/* tout élément h1 dans n'importe quel espace de nom */
*|h1 { color: red }

/* par défaut */
h1 {color: red}

À noter qu'il est possible de définir un nom d'espace par défaut :

Code:

@namespace "http://www.monsite.com";

Tous les sélecteurs css qui n'ont pas d'espace de nom spécifié seront donc attribués à celui-ci.

Les sélecteurs

Sélecteur d'adjacence indirecte : "~"

 h1~pre { color: red }

Dans la même idée que les sélecteurs d'adjacence +, celui-ci permet d'atteindre tout élément (ici pre) de même niveau que l'élément référent (ici h1). La différence étant qu'ici, l'élément cible n'a pas besoin d'être directement adjacent à l'élément référent.

Code:

<h1>Titre</h1>
<p>Pas affecté</p>
<pre>Affecté</pre>
<p>Pas affecté</p>

Sélecteur d'attribut

a[href^=https] { color: red }

Ce sélecteur permet de choisir un élément dont la valeur de l'attribut commence par ce que vous avez défini. Dans l'exemple, tous les liens dont l'adresse commence par "https".

Code:

<a href="http://www.monsite.com">Ce lien ne sera pas affecté</a>
<a href="https://www.monsite.com">Ce lien sera affecté</a>

Évidemment, ça ne se limite pas qu'aux liens.

a[href$=.pdf] { color: red }

Avec celui-ci, on peut choisir à l'inverse un élément dont la valeur de l'attribut fini par ce que vous avez défini. L'exemple au-dessus permet donc de choisir tous les liens vers un fichier PDF.

Code:

<a href="monfichier.doc">Ce lien ne sera pas affecté</a>
<a href="monfichier.pdf">Ce lien sera affecté</a>
<a href="monfichier.pdf.doc">Ce lien ne sera pas affecté</a>

a[href*=monsite] { color: red }

Celui-ci enfin, permet de sélectionner l'élément dont l'attribut désigné comporte au moins la chaîne de caractère définie.

Code:

<a href="http://www.lesite.com">Ce lien ne sera pas affecté</a>
<a href="http://www.monsite.com">Ce lien sera affecté</a>

Les pseudo-classes

:not-first-child

Cette pseudo-classe complète :first-child en proposant l'inverse, c'est à dire choisir tous les éléments qui ne soient pas le premier enfant de leur parent. Par exemple :

div p:not-first-child { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Code:

<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Souvenez-vous qu'il s'agit du premier enfant d'un parent, et pas le premier d'un type défini. Dans ce cas-ci, c'est h2 qui est le premier enfant, donc aucun p n'est premier enfant.

:last-child

À la manière de :first-child, cette pseudo-classe cible un élément s'il est le dernier enfant de son parent.

div p:last-child { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Si on voit maintenant, pour le même code CSS, ce code HTML :

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

Rien ne va se passer. En effet, le code CSS signifie "cibler tous les éléments p s'il s'agit du dernier enfant de leur parent" et non "cibler tous les éléments p qui sont les derniers de ce éléments de type p enfants". Or dans ce cas, c'est h2 qui est le dernier enfant.

:not-last-child

À la manière de :not-first-child, cette pseudo-classe cible tout élément qui n'est pas le dernier enfant de son parent.

div p:not-last-child { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Attention toutefois, rappelez-vous que ça ne fonctionne qu'avec le dernier enfant et non avec le dernier enfant d'un type particulier :

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>

</div>

Rien ne va se passer car aucun p n'est le dernier enfant de son parent, c'est h2.

:first-of-type

L'élément manquant à :first-child. Cette pseudo-classe permet cette fois-ci de cibler un élément qui est le premier type d'élément de son parent.

div p:first-of-type { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Code:

<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:not-first-of-type

Comme précédemment, elle permet de sélectionner tout élément qui ne sera pas le premier du type défini dans son parent.

div p:not-first-of-type { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Code:

<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

:last-of-type

Le parfait opposé de :first-of-type. Cette pseudo-classe permet cette fois-ci de cibler un élément qui est le dernier type d'élément de son parent.

div p:last-of-type { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:not-last-of-type

Encore une fois, l'ajout de not- est explicite : elle permet de cibler toute balise qui ne soit pas le dernier d'un type défini.

div p:not-last-of-type { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:only-of-type

Un peu plus particulier cette-fois ci, cette pseudo-classe permet d'affecter un élément qui est le seul de son type par rapport à son parent.

div p:only-of-type { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Code:

<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément sera affecté</p>
   <h2>Ce titre ne sera pas affecté</h2>
</div>

:not-only-of-type

Encore une fois, cette pseudo-classe précédée de "not-" permet de faire l'inverse de la pseudo-classe associé. Ici, on va donc cibler tout élément qui n'est pas le seul de son type.

div p:not-only-of-type { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
</div>

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Code:

<div>
   <h2>Ce titre sera affecté</h2>
   <p>Cet élément ne sera pas affecté</p>
   <h2>Ce titre sera affecté</h2>
</div>

:only-child

Comme son nom l'indique, cette pseudo-classe n'agit que sur un élément qui est le seul enfant de son parent.

div p:only-child { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Code:

<div>
   <p>Cet élément sera affecté</p>
</div>

:not-only-child

Celle-ci permet maintenant de cibler tout élément qui n'est pas le seul enfant de son parent.

div p:not-only-child { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
</div>

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
</div>

:nth-child(n)

Un peu particulier, cette pseudo-classe permet de cibler un élément qui est le n^ième enfant de son parent. Par exemple, si on veut choisir le second élément d'une liste :

li:nth-child(2) { color: red }

Code:

<ul>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément sera affecté</li>
   <li>Cet élément ne sera pas affecté</li>
</ul>

:nth-last-child(n)

Même chose que précédement, mais cette fois le décompte de n commence en partant du dernier enfant. Par exemple, si on veut cibler l'avant-dernier élément d'une liste :

li:nth-last-child(2) { color: red }

Code:

<ul>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément ne sera pas affecté</li>
   <li>Cet élément sera affecté</li>
   <li>Cet élément ne sera pas affecté</li>
</ul>

:nth-of-type(n)

Similaire à :nth-child(n), celle-ci permet de cibler le n^ième enfant d'un type défini. Par exemple, si on veut choisir le troisième paragraphe :

p:nth-of-type(3) { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Sachant qu'il s'agit de type et non de nombre d'enfant, on peut s'en servir même lorsqu'il y a des balises entre deux :

Code:

<div>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:nth-last-of-type(n)

Cette fois-ci, vous pouvez cibler le dernier d'un type, en partant du dernier de ce même type. Par exemple pour un avant-dernier paragraphe :

p:nth-last-of-type(3) { color: red }

Code:

<div>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Sachant qu'il s'agit de type et non de nombre d'enfant, on peut s'en servir même lorsqu'il y a des balises entre deux :

Code:

<div>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément ne sera pas affecté</p>
   <span>balise</span>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

:not(selecteur)

Un peu particulier encore une fois, cette pseudo-classe permet d'affecter tout élément qui n'est pas du type spécifié.
Un exemple :

:not(p) { color: red }

Code:

<div>
   <ul>
      <li>Cet élément sera affecté</li>
      <li>
         Cet élément sera affecté.
         <p>Cet élément ne sera pas affecté</p>
      </li>
   </ul>
   <p>Cet élément ne sera pas affecté</p>
</div>

:empty

Une pseudo-classe toute simple qui permet de cibler tout élément qui n'a aucun enfant.

p:empty { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté <span>car il contient un enfant</span></p>
</div>

:contains(foo)

Une pseudo-classe toute simple qui permet de cibler tout élément qui contient la chaîne de caractère définie.

p:contains(Glub) { color: red }

Code:

<div>
   <p>Glab: Cet élément ne sera pas affecté</p>
   <p>Glob: Cet élément ne sera pas affecté</p>
   <p>Glub: Cet élément sera affecté</p>
</div>

:enabled

Celle-ci permet de cibler tout élément qui est, soit par défaut, soit précisément via html, défini comme "actif". C'est surtout utile pour les éléments de formulaire.

input:enabled { background: white }

Code:

<input type="text" /> <!-- cet élément sera affecté -->
<input type="text" disabled="disabled" /> <!-- cet élément ne sera pas affecté, il est désactivé -->

:disabled

À l'inverse, cette pseudo-classe permet de cibler un élément défini comme désactivé.

input:disabled { background: grey }

Code:

<input type="text" /> <!-- cet élément ne sera pas affecté, il n'est pas désactivé -->
<input type="text" disabled="disabled" /> <!-- cet élément sera affecté, il est désactivé -->

Conclusion... ?

Tout en essayant d'être complet, je n'ai pas été exhaustif. Le CSS3 est une norme loin d'être terminée, qui évolue encore, et qui pourrait voir d'autres éléments s'ajouter par la suite.
Comme toujours, n'oubliez pas qu'on peut toujours mixer plusieurs sélecteurs !