Médiaforma

Pseudo-sélecteurs et tableaux

Print Friendly

Dans cette rubrique, je vais vous présenter quelques pseudo-sélecteurs CSS dédiés aux tableaux.

  • :first-child est le premier élément ;
  • :last-child est le dernier élément ;
  • :empty correspond aux éléments vides.

Nous ferons nos essais dans ce document :

Les lignes 10 à 17 définissent un tableau de 6 lignes sur 3 colonnes et placent des données dans certaines de ses cellules :

Pour colorer en rouge l’arrière-plan de la première ligne du tableau, nous insérons la ligne suivante entre les balises <style> et </style> :

tr:first-child { background-color: red; }

Voici le résultat :

Pour colorer en rouge la dernière colonne du tableau, nous insérons la ligne suivante entre les balises <style> et </style> :

tr:last-child { background-color: red; }

Voici le résultat :

Enfin, pour colorer en rouge toutes les cellules vides, nous insérons la ligne suivante entre les balises <style> et </style> :

td:empty { background-color: red; }

Voici le résultat :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply