Les sélecteurs CSS, partie 1 : les bases

19 03 2010

En tant que web développeur l’utilisation de feuille de style est un passage obligé et vous connaissez probablement toutes les propriétés mais utilisez vous a bon escient toutes les possibilités des sélécteurs ?

C’est quoi un sélecteur ?

Oh presque rien, c’est ce qui permet aux propriétés de s’appliquer à un endroit précis, par exemple:

p {font-size : 12px;}

Ici le sélecteur c’est l’élément (la balise) « p ».

ah! OK.

Les sélecteurs servent, comme leur nom l’indique, à sélectionner une partie de la page HTML et y appliquer un style.

Le sélecteur universel « * »

Celui là vous ne le voyez pas souvent (même si on s’en sert implicitement, vous verrez par la suite), en fait il représente tous les éléments de la page, donc toutes les propriétés rattachées a l’élément « * » seront appliqués partout. Dans la plupart des cas vous vous en servirez pour faire ça:

* {margin:0px;}

Le sélecteur de type

Ici c’est pour sélectionné un élément (ne me demander pas pourquoi on l’appel sélecteur de type et pas d’élément), comme ceci:

p {margin-left:5px;}

Le sélecteur ici c’est l’élément « p », donc tous les éléments « p » de la page auront une marge de gauche de 5px.

Les pseudo-éléments

On désigne par ce terme les éléments qu’on ne peut atteindre avec les autres sélecteurs, par exemple la première ligne d’un paragraphe.

  • :first-line : celui-ci permet d’atteindre la première ligne d’un élément de type block, inline-block, list-item, table-caption et table-cell (voir cet article pour plus d’infos)
  • :first-letter : identique au précédent mais ne s’appliquera qu’au premier caractère alphanumérique de l’élément.
  • :before et :after : ceux-ci  sont intéressants car il permettent d’ajouter du contenu avant et après l’élément.

Vous savez ce qui vous attends ? Un petit exemple pour expliquer tout ça:

<html>
  <head>
    <style>
      p:first-line {font-family:verdana;}
      p:first-letter{color:red;}
      p.court{width:150px;}
      p.long{width:300px;}
      #essai:before{content:"before"; padding-right:5px;font-family:arial; background-color:#aaF000;}
      #essai:after{content:"after"; padding-left:5px;font-family:arial; background-color:#aaF000;}
    </style>
  </head>
  <body>
    <p>Ce paragraphe contient beaucoup de texte, et n'est pas très large</p>
    <p>Ce paragraphe contient beaucoup de texte mais est plus large que le précédent</p>
    <p id="essai">test sur les pseudo-éléments :before et :after</p>
  </body>
</html>

Ce que vous devriez obtenir:

Le sélecteur de classe

Ce sélecteur fait référence à l’attribut classe d’un élément, on utilise « . » pour le désigner, un petit exemple pour voir ?

<html>
  <head>
    <style>
      p{margin-left:5px;}
      p.uneClasse{margin-right:5px;}
    </style>
  </head>
  <body>
    <p class="uneClasse">du texte</p>
    <div class="uneClasse">une div</div>
  </body>
</html>

Le premier élément , le « p », aura donc une marge à droite de 5px et une marge à gauche de 5px (et oui! On peut mixer les sélecteurs), l’élément « div » n’aura quant à lui qu’une marge de droite de 5px (car on n’a pas définit de marge autre ni sur la classe ni sur l’élément).

On peut utiliser un sélecteur de classe indépendement d’un sélecteur de type, comme ceci:

.uneClasse {font-size:16px;}

Ici tous les éléments ayant un attribut « class » égale à « uneClasse » auront une taille de caractère de 16px. Cette notation revient à faire:

*.uneClasse {font-size:16px;}

Je vous avais bien dit que vous utilisiez le sélecteur universel implicitement.

A notez également pour qu’il est possible d’indiquer plusieurs classe dans l’attribut comme ceci:

<p class="rouge bleu vert"> rouge, vert ou bleu ?</p>

Mais laquelle s’applique, quand elles modifient la même propriété?

Bizarrement ce n’est pas l’ordre dans lequel les classes sont écrites dans l’attribut mais celui dans la feuille de style, essayez avec ça:

<html>
  <head>
    <style>
      .vert {color:green;font-weight:bold;}
      .rouge {color:red;font-family:arial;}
      .bleu {color:blue;text-decoration:underline;}
    </style>
  </head>
  <body>
    <p class="rouge bleu vert"> rouge, vert ou bleu ?</p>
  </body>
</html>

Et changez l’ordre des classes vert, rouge et bleu dans la définition du style. Dans cet exemple le texte sera de couleur bleue, toutes les autres propriétés définis par les classes sont appliqués à l’élément car il n’y en à pas une commune à chaque classe.

avec la classe bleu en dernier:

puis la classe rouge en dernier:

En y réfléchissant bien ce n’est pas si bizarre que ça, la feuille de style est « lu » par le navigateur de haut en bas, c’est donc le sélecteur le plus « bas » qui est appliqué.

Les pseudo-classes

On peut les considérer comme des attributs aux sélecteurs, ce sont des notations spécifiques qui permettent de définir les propriétés d’un style en fonction de l’état d’un élément ou lorsqu’un évènement se produit sur l’élément (directement ou par une classe) lié au style.

Pseudo-classes d’ancres

On parle ici des pseudo-classes qui vont affectés un élément « a » disposant de l’attribut « href », il y en à 2:

  • :link : ce sera l’apparence du lien tant qu’il n’est pas visité (cliqué).
  • :visited : l’apparence du lien après avoir été visité.
a:link {color:green}
a:visited {color:red}

Notez bien que ces deux pseudo-classes sont exclusives, un lien est soit visité (:visited) soit non-visité (:link).

Pseudo-classes dynamiques

Celles-ci sont moins restrictives, elles peuvent s’appliquer à beaucoup plus d’éléments:

  • :hover : se déclenche lors du passage de la souris sur l’élément.
  • :active : se déclenche lorsque l’élément est activé, par exemple en pressant le bouton.
  • :focus : se déclenche lorsque l’élément accepte des saisies au clavier.

Un petit exemple pour mieux comprendre:

<html>
  <head>
    <style>
      input:hover {background-color:#000;color:#F00;}
      input:active {border:2px solid #0FF}
      input:focus {background-color:#000; color:#FFF;}
    </style>
  </head>
  <body>
    <input type="text">
  </body>
</html>

Ce qu’on obtient pour :hover

pour :active

et pour :focus (la bordure jaune est du au navigateur que j’utilise!)

Le sélecteur d’ID

Celui là vous permet de définir un style en ciblant un élément par son attribut « id », pour ce faire utilisez cette notation #monId.

<html>
  <head>
    <style>
      p {background-color : #00F; color:#FFF;}
      #monID {background-color:#c0c0c0;}
    </style>
  </head>
  <body>
    <p id="monId">avec identifiant</p>
    <p>sans identifiant</p>
  </body>
</html>

La propriété « color » s’applique bien au deux éléments « p » mais seul celui avec l’identifiant « monId » à un arrière-plan gris, l’élément « p » sans identifiant a l’arrière-plan défini par le sélecteur « p ». Le sélecteur d’ID est donc prioritaire sur le sélecteur de type.

Comme ceci:

Bientôt la suite

Et nous voici à la fin de cette première partie sur les sélecteurs CSS, nous verrons les sélecteurs un peu plus avancé dans la seconde partie que vous retrouverez prochainement.