Pseudo-classes et pseudo-éléments.

Pseudo-classes.

Une pseudo-classe est un sélecteur qui cible un élément dans un état spécifique comme un survol de souris ou bien la position d'un paragraphe ou d'une ligne. Les pseudo-classes commencent toujours par deux points ':'.

:first-child, :last-child

':first-child' cible le premier élément enfant d'un parent quelconque et ':last-child', le dernier.

p:first-child {
color: red;
}

p:last-child {
color: green;
}

<div>
  <p>Texte en rouge.</p>
  <p>Texte en vert.</p>
  <h2>N'est pas considéré comme le dernier enfant > 'p' !</h2>
</div>
									

Attention lors de l'imbrication d'un parent dans un autre parent comme dans les listes par exemple.

ul li {
  color: blue;
}

ul li:last-child {
  color: red;
}

<ul>
  <li>Item 1 bleu</li>
  <li>Item 2 bleu</li>
  <li>Item 3 rouge
    <ul>
      <li>Item 3.1 bleu</li>
      <li>Item 3.2 bleu</li>
      <li>Item 3.3 rouge</li>
    </ul>
  </li>
</ul>

									

:nth-child()

Cette pseudo-classe permet de cibler un élément qui possède 'an+b' éléments fils d'un même parent (bien qu'en CSS4 l'élément parent ne soit plus obligatoire). Les valeurs de 'a' et 'b' doivent être des entiers et l'indice du premier élémnts fils débute à 1. 'n' parcours les entiers à partir de 0. Il est aussi possible d'utiliser des mots clés pour remplacer ces valeurs. '2n +0' = '2n' ou bien 'even', cible les éléménts 2, 4, 6, etc. '2n+1' ou bien 'odd', cible 1, 3, 5 etc. '3n+4' cible les éléments 4, 7, 10, 13 etc. '0n+3' = '3' cible le troisième éléments.

/* Quelques exemples. */

tr:nth-child(2n+1)
    Permettra de cibler les lignes impaires d'un tableau.
    
tr:nth-child(odd)
    Permettra de cibler les lignes impaires d'un tableau.
    
tr:nth-child(2n)
    Permettra de cibler les lignes paires d'un tableau.
    
tr:nth-child(even)
    Permettra de cibler les lignes paires d'un tableau.
    
span:nth-child(0n+1)
    Permettra de cibler un élément 'span' qui est le premier fils de son parent. 
    Cela aura le même effet que la pseudo-classe :first-child.
    
span:nth-child(1)
    Synonyme à l'exemple précédent.
    
span:nth-child(-n+3)
    Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent 
    et que c'est également un élément span. 
    
									

A REVOIR EN DETAIL !

:nth-of-type()

Cette pseudo-classe utilise aussi les mots clés 'odd' et 'even'.

/* Paragraphes impairs */
p:nth-of-type(2n+1) {
  color: red;
}

/* Paragraphes pairs */

p:nth-of-type(2n) {
  color: blue;
}

/* Premier paragraphe */
p:nth-of-type(1) {
  font-weight: bold;
}
    
									

:nth-last-of-type()


Articles connexes:

Test pseudo-classes :nht-().[ GO! ]


Retour à l'index. [ go ]

Keep and Try it ! Dernière mise à jour: 01/12/2020