NotoOn

Voici un mémo CSS3 pour profiter de tout le potentiel offert par cette nouvelle version et transcender vos designs web.

Sommaire

RAPPEL DE TERMINOLOGIE
LES SELECTEURS CSS
    Les sélecteurs d'attributs
    Les sélecteurs de noeuds enfants
    Les sélecteurs de noeuds frères
    Combiner les sélecteurs
LES PSEUDO-CLASSES
    La pseudo-classe :first-child
    La pseudo-classe :focus
    La pseudo-classe :lang()
LES PSEUDO-ELEMENTS
    Le pseudo-élément :first-line
CONCLUSION

Rappel de terminologie

Pour les CSS

* { /* sélecteur universel */
propriete : valeur;
}
élément { /* sélecteur de type */
propriete : valeur;
}
.sélecteurDeClasse { /* sélecteur de classe */
propriete : valeur;
}
#sélecteurID { /* sélecteur d'ID */
propriete : valeur;
}

Pour le XHTML

<element attribut1="valeur1" attribut2="valeur2" />
<element attribut1="valeur1" attribut2="valeur2"></element>

Les sélecteurs CSS

Les sélecteurs d’attributs

Les sélecteurs d’attributs permettent de styler un élément en fonction d’un attribut ou d’une valeur d’attribut. Ils peuvent aussi utiliser les wild cards ou caractères de remplacement, pour détecter une portion de la valeur d’un attribut.

1. On applique une bordure de 1px à toutes les images dotées d’un attribut alt.

img[alt] {
border:1px solid #000
}
 
<img src="image.png" alt="Texte alternatif" />

2. Seules les ancres dotées d’un attribut title seront en gras.

a[title] {
font-weight:bold
}
 
<a href="#" title="Infobulle">Ceci est un lien en gras</a>

3. Tous les input dont la valeur de l’attribut type est ‘text’ auront une bordure verte.

input[type="text"] {
border:1px solid green
}
 
<input type="text" id="name" />

4. Seuls les p dont les attributs ont pour valeurs title="Edito" et class="intro" en même temps seront modifiés.

p[title="Edito"][class="intro"] {
font-weight:bold;
text-transform:uppercase
}
 
<p title="Edito" class="intro">Un paragraphe affecté par la CSS.</p>
<p class="intro">Un pararaphe non stylé.</p>
<p>Un autre pararaphe non stylé.</p>

5. On peut également travailler sur une portion de la valeur d’attribut en utilisant les wild cards *=

q[cite*="http://www.notoon.com/"] {
font-weight:bold
}
 
<q cite="http://www.notoon.com/category/">Cette quote est affectée par la CSS.</q>

6. Lorsque les valeurs d’un attribut sont des mots séparés par des espaces, on utilise ~=

a[rel~="copyright"] {
font-weight:bold
}
 
<a href="#" rel="copyright copyleft copyeditor">Lien</a>

7. Lorsque les valeurs d’un attribut sont des mots séparés par des tirets, on utilise |=

blockquote[lang|="en"] {
font-weight:bold
}
 
<blockquote lang="en-US">This is US. Hello Uncle Sam !</blockquote>
<blockquote lang="en-EN">This is UK. God save the Queen !</blockquote>

Les sélecteurs de noeuds enfants

Un sélecteur de noeud enfant, noté parent > enfant désigne l’ensemble des éléments placés directement en dessous d’un autre dans l’arborescence de la page. Autrement dit, cela ne fonctionne pas pour les petits-enfants. Dans l’exemple, les ancres placées à l’intérieur de la liste ne seront donc pas stylées.

div > a {
font-weight:bold
}
 
<div>
  <a href="#top">Lien affecté par la CSS</a>
  <ul>
    <li><a href="#">Lien non stylé</a></li>
    <li><a href="#">Lien non stylé</a></li>
  </ul>
  <a href="#content">Lien affecté par la CSS</a>
  <a href="#bottom">Lien affecté par la CSS</a>
</div>

Les sélecteurs de noeuds frères

Un sélecteur de noeud frère, noté frère1 + frère2 désigne le premier frère, c’est-à-dire le premier élément qui succède à un autre, tout en ayant le même niveau dans l’arborescence. Dans l’exemple, le second paragraphe n’est donc pas concerné par le sélecteur CSS. Seul le premier paragraphe frère (ni parent, ni enfant) est mis en gras.

h1 + p {
font-weight:bold
}
 
<h1>Titre</h1>
<p>Ce paragraphe est le premier frère de h1, donc affecté par la CSS.</p>
<p>Ce paragraphe est aussi frère de h1, mais n'est pas stylé.</p>

Combiner les sélecteurs

Lorsque plusieurs sélecteurs ont les mêmes propriétés, il est possible de les regrouper. Pour cela on utilise le caractère de combinaison virgule. Une grosse erreur est de faire abstraction de l’élément parent pour le deuxième sélecteur lorsque deux sélecteurs ont le même parent. Dans l’exemple, on veut que l’introduction et la conclusion d’un post soient écrites en gras.

Mauvaise CSS

.post .postIntroduction, .postConclusion {
font-weight:bold
}

Bonne CSS

.post .postIntroduction, .post .postConclusion {
font-weight:bold
}
 
<div class="post">
  <p class="postIntroduction">L'introduction est en gras.</p>
  <p>Tout autre paragraphe n'est pas concerné.</p>
  <p class="postConclusion">La conclusion est en gras.</p>
</div>

Ce que nous avons vu jusqu’à présent est normalement suffisant dans la plupart des cas. Mais dans certains contextes, cela n’est pas adapté. C’est là qu’interviennent les pseudo-classes et pseudo-éléments.

Les pseudo-classes

Les pseudo-classes portent sur des éléments existants dans le code source du document et auxquels on peut accéder par des caractéristiques autres que leur nom, attribut ou contenu. La pseudo-classe :first-child, par exemple, correspond au premier élément enfant d’un autre élément.
Liste des pseudo-classes :

• :first-child
• d’ancres :link et :visited
• dynamiques :hover, :active et :focus
• de langue :lang()

La pseudo-classe :first-child

Seul le premier paragraphe est mis en gras car il est le premier fils du div.

div > p:first-child {
font-weight:bold
}
 
<div>
  <p>Premier fils, ce paragraphe est affecté par la CSS.</p>
  <p>Second fils, ce paragraphe n'est pas stylé.</p>
</div>

La pseudo-classe :focus

En cliquant sur le champ texte, l’arrière-plan devient bleu.

input[type="text"]:focus {
background:blue
}
 
<input type="text" id="name" />

La pseudo-classe :lang()

Seule la blockquote écrite en anglais est affectée par la CSS.

blockquote:lang(en) {
font-weight:bold
}
 
<blockquote lang="en">She sells sea shells by the sea shore.</blockquote>
<blockquote lang="fr">Un chasseur sachant chasser ne part pas à la chasse sans son chien.</blockquote>

Les pseudo-éléments

Les pseudo-éléments créent une abstraction dans l’arborescence du document. Il permettent de donner un style à un contenu n’apparaissant pas dans le code source du document comme étant un élément, d’où leur nom. Il est par exemple possible de styler la première ligne d’un paragraphe avec le pseudo-élément :first-line. Liste des pseudo-éléments :

• :first-line
• :first-letter
• :before et :after

Le pseudo-élément :first-line

Seule la première ligne du paragraphe est affectée par la CSS.

p:first-line {
font-weight:bold
}
 
<p>Cette 1ère ligne est affectée par la CSS.
Cette 2ème ligne est non stylée.
Cette 3ème ligne est non stylée.</p>

Conclusion

Et voilà ! Gardez à l’esprit que l’utilisation de tous ces sélecteurs, bien qu’ils facilitent grandement la vie, ne sont pas toujours compatibles avec l’ensemble des navigateurs, particulièrement les anciens (eh oui tout le monde n’a pas encore migré).
Sources : Sélecteurs CSS2.1 – Sélecteurs CSS3