CSS : nouveaux sélecteurs introduits par CSS3

Le sélecteur de la règle de style peut comprendre une pseudo-classe ou un pseudo-élément.

Pseudo-éléments et pseudo-classes

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme une partie de l'élément ciblé par le sélecteur.
Ainsi le pseudo-élément ::firt-letter ne s'applique qu'à la première lettre du texte ciblé.

À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

Non vous ne voyez pas double ... Il faut bien insérer deux fois le double point.


Maintenant rassurez vous les navigateurs tolèrent toujours l'ancienne syntaxe (un seul double point) et j'avoue qu'il m'arrive encore souvent de ne mettre qu'un seul double point.


Je rappelle que le pseudo-élément ::before est à la base de la numérotation automatique des titres (balises H1 à H6) qu'il est désormais possible de réaliser avec CSS. Voir dans le même tuto la page sur la "numérotation automatique des titres".

Les nouvelles pseudo-classes pour les tableaux

Il devient désormais très facile de cibler une ligne ou un groupe de ligne d'un tableau pour le styler.

Exemples

Une page comprend deux tableaux.

Le code HTLM

Il est identique pour les deux tableaux sauf en ce qui concerne la valeur de l'ID.

<table id ='tableau1'> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td>contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td>contenu cellule</td><td >contenu cellule</td><td >contenu cellule</td> </tr> <tr> <td></td><td >contenu cellule</td><td>contenu cellule</td> </tr> <tr> <td>contenu cellule</td><td >contenu cellule</td><td>contenu cellule</td> </tr> </table>

Pour le deuxième tableau lire ... table ID ="tableau2"

Les règles de style relatives 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; }

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.

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 avec les tableaux.

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 ;}

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 !

: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 !

Rendu de l'exemple

Testez ce code !

Nouveaux sélecteurs pour les formulaires

Le code HTML de l'exemple

<form action = '#' method = 'post'> ... <label>Nom (en lettres majuscules) : </label> <input type = 'text' required pattern = '[A-Z\ ]{2,30}' placeholder ='lettres majuscules et espaces' autofocus > <label>prénom (en lettres minuscules) : </label> <input type = 'text' required pattern = '[a-zéèêî\ ]{2,30}' placeholder ='lettres minuscules' > <h3>Votre civilité : </h3> <input type ='radio' name ='civilite' value ='H'><label>Monsieur</label> <input type ='radio' name ='civilite' value ='F'><label>Madame</label> <h3>Votre date de naissance :</h3> <input type = 'number' required min = '1' max = '31' ><label>Jour </label> <input type = 'number' required min = '1' max = '12' ><label>Mois</label> <input type = 'number' required min = '1930' max = '2015' ><label>Année</label> <h3>Sports préférés : </h3> <input type ='checkbox' name ='sports' value ='F'><label>foot</label> <input type ='checkbox' name ='sports'value ='C'><label>cyclisme</label> <input type ='checkbox' name ='sports'value ='N'><label>natation</label> <input type ='checkbox' name ='sports'value ='A'><label>Autres</label> <label>téléphone : </label> <input type = 'tel' required pattern = '[0-9]{10}' placeholder ='dix chiffres' maxlength = '10'> <label>autre n°tél : </label> <input type = 'tel' pattern = '[0-9]{10}' placeholder ='dix chiffres' maxlength = '10'> <label>mail : </label> <input type = 'email' required placeholder ='____@___' > <label></label> <button type = 'submit' name = 'validez' >Validez</button> </form>

Je suis obligé de faire une digression HTML5 en évoquant les nouveaux types de champs et les nouveaux attributs de ces balises introduits par la version 5 de HTML.
En effet on retrouve des mêmes termes dans les deux langages.
Un seul exemple : le nouvel attribut required de la balise input (champ obligatoire) a pour pendant la pseudo-classe :required pour formater ce champ obligatoire.

Nouvelles valeurs de l'attribut type

HTML5 introduit de nouveaux types pour la balise input.

Nouveaux attributs de la balise input :

Les atttributs optional, required, autofocus n'ont pas besoin de valeur !

Les expressions régulières

Une expression régulière définit un gabarit de saisie. Tant qu'une saisie dans un champ ne correspond pas à son gabarit la soumission des données sera impossible.

La soumission est aussi impossible si une saisie en correspond pas au type du champ (exemple : pas de caractère @ dans un champ de type email).

Dans les deux premières expressions régulières le caractère espace est "échappé" : précédé du caractère \

Les boutons de commande

Pour dessiner des boutons de soumission il est désormais conseillé d'utiliser la syntaxe :
<button type ="submit">Envoi </button>
plutôt que :
<input type ="submit" value ="envoi" >

Les autres types du conteneur button sont : reset (effacement des données) et button (pour associer une fonction JavaScript au bouton).

Le code CSS pour le formulaire

	...
	form {width : 90%; margin : auto; border :2px solid black ;}
	input,label, button, select {display : inline-block ; width : 40% ; height : 30px ; margin : 1% ; 
		vertical-align : top ;}
	input:required {border : 2px solid red ; }
	input:optional {border : 1px solid black ; }
	input:valid {color : green ; }
	input:invalid {color : red ;}                       
	input:focus {background : pink }
	input[type = radio], input[type =checkbox],input[type =number] {width : 5%; margin :1%;  }
	input[type = radio]+label, input[type = checkbox]+label, input[type = number] + label {width :9%; text-align : left;}
	...

On retrouve aussi des sélecteurs CSS2. Par exemple input[type = radio] qui cible uniquement les boutons radio ou input[type =number] qui cible uniquement les champs de type number. Il s'agit de sélecteurs d'attribut.

Rendu de l'exemple

Testez ce code !

La pseudo- classe de négation

La pseudo-classe de négation est une nouveauté CSS3 qui devrait s'avérer très utile car elle devrait simplifier considérablement les feuilles de style.
Avez vous remarqué que dans cette page et ce n'est pas coutume tout le texte en italiques sauf le texte contenu dans les balises P.
Dans la feuille de style interne de la page il y a en effet la règle de style suivante :

	body *:not(p) {font-style : italic; }

Le sélecteur body *:not(p) permet de cibler toutes les descendants de BODY sauf les balises P.
Donc le texte de toutes les balises (sauf P) sera en italique.
L'argument entre () peut être une classe.
Ainsi vous pouvez écrire img:not(.miniature) {box-shadow : ...; display : block ;) : toutes les images sont ombrées avec saut de ligne avant et après sauf celles affectées de la classe miniature.
Retour menu