Nouveaux sélecteurs CSS3

Les nouveaux sélecteurs CSS3 sont nombreux. Dans cette page nous allons aborder ceux qui sont utiles dans les tableaux HTML.

Premier tableau

en-tête colonne 1en-tête colonne 2en-tête colonne 3
contenu cellulecontenu cellulecontenu cellule
contenu cellulecontenu cellulecontenu cellule
contenu cellulecontenu cellule
contenu cellulecontenu cellulecontenu cellule

Observations

La première ligne du tableau a un fond jaune, la dernière un fond rose et les autres un fond "aqua".
Les bordures entre cellules sont très espacées (10px). Une cellule vide a un fond blanc.

Le code HTML correspondant aux tableaux

Le code est le même pour les deux tableaux ; seule différence la valeur de l'ID associé à la balise table.
Donc dans les deux cas des balises TD ou TH contenues dans des conteneurs TR ; eux-même contenus dans TABLE.

Les règles de style communes aux deux tableaux

table{width : 90%; margin : 10px auto 10px auto ; border : 2px solid navy} tr{height : 50px ;} td,th { border : 1px solid black ; } td {padding-left : 10px ; } td:empty {background : white;}

Nouveauté CSS3 : la pseudo-classe :empty qui permet de cibler les éléments vides.

Les règles de style propres au premier tableau identifié "tableau1"

#tableau1 {border-spacing : 10px ;} #tableau1 tr {background : aqua ;} #tableau1 tr:first-child {background: yellow; } #tableau1 tr:last-child {background: pink; }

Syntaxe :

Nous avons donc deux nouvelles pseudo-classes : :first-child et :last-child qui peuvent être utilisées avec n'importe quelle balise mais sont particulièrement indiquées pour les tableaux.

Deuxième tableau

en-tête colonne 1en-tête colonne 2en-tête colonne 3
contenu cellulecontenu cellulecontenu cellule
contenu cellulecontenu cellulecontenu cellule
contenu cellulecontenu cellule
contenu cellulecontenu cellulecontenu cellule

Observations

Dans ce deuxième tableau les lignes impaires ont un fond aqua et les lignes paires un fond gris.
Les bordures contigues sont fusionnées !

Les règles de style propres au deuxième tableau identifié "tableau2"

#tableau2 {border-collapse : collapse ;} #tableau2 tr:nth-child(even) {background: grey; color : white ; } #tableau2 tr:nth-child(odd) {background: aqua ;color : navy ;}

Syntaxe :

:nth-child(even) et :nt-child(odd) sont de nouvelles pseudo classes introduites par le CSS3.
Appliquées à TR elles permettent de sélectionner les lignes paires et impaires d'un tableau.

Le paramètre de :nth-child peut être un nombre. Par exemple tr:nth-child(3) désigne la troisième ligne du tableau !
La nouvelle pseudo-classe :nth-child(n) peut être être associée à n'importe quelle balise, par exemple la balise LI (item de liste).
Retour menu