Petit Kiwi : web, high-tech & cie

CSS3 : sélecteurs, pseudo-classes et pseudo-éléments

Avec la compatibilité grandissante des navigateurs avec CSS3 et la panoplie de nouveautés qu’apporte cette version, il serait dommage de ne pas en profiter pour transcender vos designs web. Aussi j’ai pensé qu’un petit pense-bête et quelques exemples seraient profitables.

Rappels de terminologie

Les sélecteurs d’attributs

Les sélecteurs d’attributs permettent de styler un élément en fonction d’un attribut de la balise et/ou de sa valeur .

1. Eléments <img> dotées d’un attribut alt

2. Eléments <input> dont l’attribut type a exactement pour valeur « text »

3. Eléments <input> dont les attributs text et name ont respectivement les valeurs « text » et « prenom »

4. Eléments <input> dont l’attribut name contient une liste de valeurs séparées par un espace, dont une est exactement « Paul »

5. Eléments <input> dont l’attribut name a une valeur commençant exactement par « Pierre »

6. Eléments <input> dont l’attribut name a une valeur terminant exactement par « Paul »

7. Eléments <input> dont l’attribut name a une valeur contenant la sous-chaîne « JeanPaul »

8. Eléments <input> dont l’attribut name contient une liste de valeurs séparées par un tiret et commençant par « Pierre »

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.
Exemples de pseudo-classes :

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

1. La pseudo-classe :first:child désigne le premier élément fils de son parent

2. La pseudo-classe :focus désigne l’action de se placer sur l’élément concerné

 

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. On peut par exemple, avec ::first-line, donner un style à la première ligne d’un paragraphe (dépend donc du formattage). Notez la notation avec le double :: pour les pseudo-éléments.
Exemples de pseudo-éléments :

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

 

Les combinateurs

Les combinateurs permettent d’agir sur un élément en fonction de sa relation avec un autre.

1. Les sélecteurs de noeuds descendants. Comprenez tous les éléments <em> contenus dans l’élément <h1>

2. Les sélecteurs de noeuds enfants. Comprenez seuls les éléments <a> dont le parent direct est l’élément <div>

3. Les sélecteurs de noeud adjacent. Comprenez l’élément <p> immédiatement précédé par <h1>

4. Les sélecteurs de noeuds frères. Comprenez tous les éléments <pre> suivants l’élément <h1> mais au même niveau que lui

Enfin, lorsque vous combinez plusieurs sélecteurs ayant le même parent, il ne faut pas omettre ce dernier pour chacun d’entre eux.

Si vous souhaitez en apprendre davantage, je vous conseille d’aller faire un petit tour sur la doc officielle des CSS.

Commenter