CSS : nouveaux sélecteurs introduits par CSS3

Pour produire des interfaces dynamique sans devoir recourir à JavaScript (mais grâce au CSS), il faut pouvoir cibler de façon très précise un ou plusieurs éléments de la page.
Pour cibler un seul élément du DOM c'est simple il suffit de lui affecter un ID avec une valeur unique mais pour cibler plusieurs éléments il faut créer des sélecteurs plus ou moins sophistiqués.
Dans ce présent chapitre je rappelle les anciens sélecteurs mais je présente aussi ceux introduits par la version 3 de CSS.

Rappels des sélecteurs simples

Rappelons les sélecteurs basiques par des exemples :
h1 : cible toutes les balises H1
* : cible tous les éléments ; * est le sélecteur universel !
h1, h2, h3 : cible les balises H1 et H2 et H3
div p : cible les éléments P inclus dans le conteneur DIV. On dit que div p est un sélecteur de descendants.
.info: cible tous les noeuds ayant l'attribut class ="info" ; sélecteur de classe générique.
p.remarque: cible les balises P affectées de la classe "remarque" ; sélecteur de classe spécifique.
#entete : cible l'élément unique (en principe) de la page ayant l'attribut ID ="entete". On parle de sélecteur d'identifiant.

Sélecteurs basés sur de opérateurs (ou combinateur)

Sélecteur de voisin direct

L'opérateur '+' permet de cibler un noeud qui suit immédiatement un élément donné.
Exemple : div + p cible n'importe quel élément P qui suit immédiatement un élément DIV.

Les sélecteurs de voisins

Le combinateur '~' permet de cibler les nœuds qui suivent un élément et qui ont le même parent.
Exemple : p ~ span cible les éléments SPAN qui suivent (immédiatement ou non) un élément P et qui ont le même élément parent.

Les sélecteurs d'éléments enfants

Le combinateur '>' permet de cibler les nœuds qui sont des enfants directs d'un élément donné.
Exemple : ul > li cible tous les éléments LI qui sont directement situés sous une balise UL.

Dans la pratique on utilise surtout le sélecteur de voisin direct.
Exemple : le sélecteur img + p cible les légendes d'images.

Sélecteurs d'attributs

Illustrons les sélecteurs d'attributs par des exemples !
[href] : cible tous les éléments ayant l'attribut href
img [alt] : cible les images ayant l'attribut alt.
input [type="text"] : cible les éléments INPUT avant pour l'attribut TYPE la valeur exacte "text".
[alt* ="mollusque"] : cible les noeuds ayant l'attribut ALT et dont la valeur contient la chaine "mollusque". Notez le caractère * juste après le nom de l'attribut.

Il existe aussi des opérateurs pour préciser "se termine par telle chaine" et "commence par telle chaine".

Pseudo-éléments et pseudo-classes

Le sélecteur peut comprendre une pseudo-classe OU un pseudo-élément.

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é.

Non vous ne voyez pas double ... Il faut bien insérer deux fois le double point lorsqu'il s'agit d'un pseudo-élément.
Maintenant rassurez vous, les navigateurs tolèrent toujours l'ancienne syntaxe (un seul ":").

::first-letter
::first-line
::before
::after

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 pseudo-classes sont utilisées afin de mettre en forme un élément en fonction de son état.
Les deux pseudo-classes les plus connues sont :active et :hover c'est à dire respectivement sur clic ou sur survol d'un élément.

CSS3 introduit de nouvelles pseudo-classes, certaines pour les tableaux HTML et d'autres pour les formulaires HTML.

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 pour le premier tableau (identifié "tableau1")

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

border-spacing : 10px : espacement de 10 pixels entre deux cellules contigues ; la valeur par défaut de la propriété border-spacing est : 1px
tr:first-child : cible la première ligne du tableau
tr:last-child : cible la dernière ligne du tableau

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 pour le 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 "grey". et les bordures contiguës sont fusionnées !

border-collapse : collapse : fusion des bordures de cellules contiguës.
La valeur par défaut de la propriété border-collapse est separate (avec un espacement par défaut de 1px)
tr:nth-child(even) : cible les lignes paires du tableau
tr:nth-child(odd) : cible les lignes impaires du 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 !

Le rendu

Aperçu de la page dans un iframe :

Nouveaux sélecteurs pour les formulaires

Un petit exemple vaut mieux qu'un long discours.

Exemple de code HTML 5 d'un formulaire

	<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 ici une digression HTML5 en évoquant les nouveaux types de champs et les nouveaux attributs introduits par la version 5 de HTML.
Il y a une étroite complémentarité entre les nouveautés HTMl 5 pour les formulaires et les nouveautés CSS pour ces mêmes formulaires.
Le même terme peut désigner un nouvel attribut et une nouvelle pseudo-classe. Un seul exemple : le nouvel attribut required de la balise INPUT (pour créer un champ à saisie obligatoire) a pour pendant la pseudo-classe :required pour styler ce champ obligatoire.

Nouvelles valeurs de l'attribut type

HTML 5 introduit de nouveaux types pour la balise INPUT.

tel : le smartphone affiche un clavier approprié
email : pour être valide la saisie doit comprendre le caractère @
url: pour être valide la saisie doit commencer par le protocole (http:// ou ftp:// ou mailto:)
number : l'appareil mobile affiche un clavier numérique. Pour être valide la saisie ne doit comporter que des chiffres
range : saisie d'un nombre via un curseur
date : permet de saisir une date proche de la date actuelle facilement car un calendrier appparait. Type encore mal implémenté.

Nouveaux attributs de la balise INPUT

optional : champ dont la saisie est facultative (attribut facultatif)
required : champ dont la saisie est obligatoire
autofocus : champ sélectionné lors du chargement de la page
pattern : précise le masque de saisie à respecter sous forme d'une expression régulière : voir ci-dessous
placeholder : affichage d'un texte dans le champ tant que ce dernier n'a pas été rempli

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).

entre crochets les caractères autorisés
entre accolades le nombre de caractères autorisés

[A-Z\ ]{2,30} : autorise uniquement la saisie de lettres majuscules et de l'espace (entre 2 et 30 caractères)
[a-zéèêî\ ]{2,30} : autorise uniqment la saisie de lettre minuscules y compris les lettres accentuées et espace
[0-9]{10} : autorise uniquement la saisie de chiffres (10 chiffres ni plus ni moins)

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

:required : cible les champs obligatoires c'est à dire ceux qui ont l'attribut required
:optional : cible les champs facultatifs c'est à dire ceux qui n'ont pas l'attribut required
:valid : cible les champs dont le contenu correspond à l'expression régulière définie par l'attribut pattern ou au type de champ
:invalid : cible les champs dont le contenu ne correspond pas à la valeur de l'attribut type ou à l'expression régulière définie par l'attribut pattern
:focus : cible le champ pointé par la souris

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.

adjacents

input[type = radio]+label : cible une étiquette (balise label) qui suit immédiatement un bouton radio
input[type = checkbox]+label : cible une étiquette qui suit immédiatement une case à cocher
etc.

Aperçu de la page dans un iframe :

Le traitement des données soumissionnées (emploi du PHP) n'est pas évoqué dans cette page.
Donc si vous cliquez sur "Validez" après avoir renseigné correctement tous les champs obligatoires il ne passera rien ...
Par contre toute tentative de soumission sera bloquée tant qu'il y aura des champs obligatoires non ou mal remplis.

Des pseudo-classes pour les champs de type number

Les nouveautés en matière de pseudo-classes dans la spéciification CSS3 sont tellement nombreuses qu'il est difficile de les citer toutes. Cependant je ne peux m'empécher de vous présenter des pseudo-classes qui permettent de représenter de façon très visuelle la validité ou non d'une saisie.

number

min & max

:in-range
:out-of-range

Exemple

La feuille de style

...
input[type ="number"]:in-range {color : green; }
input[type ="number"]:out-of-range {color : red; }
...

Le code HTML

...
	<label>Note en math : </label>
		<input type ="number" min = "1" max ="19" ... >
	<label>Note en français : </label>
		<input type ="number" min = "1" max ="19" ... >
	<label>Note en histoire & géographie : </label>
		<input type ="number" min = "1" max ="19" ... >
...

La note doit être comprise entre 1 et 19. Si elle est contenue dans cet intervalle elle sera affichée en vert, sinon en rouge.

Le rendu

Aperçu de la page dans un cadre :

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.

Le rendu du code

Aperçu de la page dans un cadre :

Tous les titres sont en italique, gras et centrés.
Toutes les images sont centrées, de grande taille et ombrées sauf la première.

Le code de la page

Code HTML

	<h1>Titre principal</h1>
	<p><img src ="../images/bikini2.jpg" class ="miniature" >
	<br>Corps de texte ...
	<br>Blabla ...
	<br>Blabla ...
	
	<h2>Titre secondaire</h2>
	<img src ="../images/bikini3.jpg"  >
	<p>Corps de texte ... 
	<br>Blabla ...
	
	<h2>Titre secondaire</h2>
	<p>Corps de texte ...
	<br>Blabla ...
	<img src ="../images/bikini21.jpg"  >
	<img src ="../images/bikini23.jpg"  >

Notez que la première image est affectée de la classe "miniature".

La feuille de style

	body {width : 600px ; margin : auto ; }
	body *:not(p) {font-style : italic; font-weight : bold ; text-align : center; }
	img.miniature {width : 10% ; float : left ; margin : 1%; }
	img:not(.miniature) {box-shadow : 10px 10px 10px gray ; display : block ; width :60% ;   margin : 10px auto ; )

:not

body *:not(p) : cible toutes les balises enfants de BODY sauf les balises P donc les balises H1 et H2 de la page.
img:not(.miniature) : cible toutes les images sauf celles affectées de la classe "miniature". Donc toutes les images sont centrées et ombrées sauf celles auxquelles on attribue la classe "miniature".

Traduction

Tutoriel CSS3 - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS : nouveaux sélecteurs introduits par CSS3

Rappels des sélecteurs simples

Sélecteurs basés sur de opérateurs (ou combinateur)

Sélecteur de voisin direct

Les sélecteurs de voisins

Les sélecteurs d'éléments enfants

Sélecteurs d'attributs

Pseudo-éléments et pseudo-classes

Les nouvelles pseudo-classes pour les tableaux

Exemples

Le code HTLM

Les règles de style relatives aux deux tableaux

Les règles de style pour le premier tableau (identifié "tableau1")

Les règles de style pour le deuxième tableau (identifié "tableau2")

Le rendu

Nouveaux sélecteurs pour les formulaires

Exemple de code HTML 5 d'un formulaire

Nouvelles valeurs de l'attribut type

Nouveaux attributs de la balise INPUT

Les expressions régulières

Les boutons de commande

Le code CSS pour le formulaire

Des pseudo-classes pour les champs de type number

Exemple

La feuille de style

Le code HTML

Le rendu

La pseudo- classe de négation

Le rendu du code

Le code de la page

Code HTML

La feuille de style