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 via des exemples :
h1 : cible toutes les éléments H1
* : cible tous les éléments ; * est le sélecteur universel !
h1, h2, h3 : cible les titres H1,h2 et H3
article p : cible les éléments P inclus dans le conteneur ARTICLE. On dit que article p est un sélecteur de descendants.
.info: cible tous les éléments ayant l'attribut class ="info" ; il s'agit d'un sélecteur de classe générique.
p.remarque: cible les éléments P affectés de la classe "remarque" ; il s'agit d'un 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)

Dans ce paragraphe je vous présente de sélecteurs moins connues qui peuvent s'avérer très utiles : éviter la multiplication des classes, éviter la règle de style en ligne (attribut style dans l'instruction HTML).

Sélecteur de voisin direct

L'opérateur "+" permet de cibler la balise qui suit immédiatement un élément donné.
Exemple : le sélecteur img + p permet de styliser la légende d'une image. C'est plus élégant qu'une classe "legende_image" ou du CSS dans l'élément P.

Les sélecteurs d'éléments enfants

Le combinateur '>' permet de cibler les balises 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.

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

Pseudo-éléments et pseudo-classes

Le sélecteur peut être composé à partir d'une pseudo-classe OU d'un pseudo-élément.

Les pseudo-éléments

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 désormais 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 avec 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.
Numéroter automatiquement les titres

Les pseudo-classes

Les pseudo-classes sont utilisées afin de mettre en forme un élément en fonction de son état.

Quelques pseudo-classes

:hover cible un élément survolé
:active cible un élément cliqué
:link cible un lien non visité
:visited cible un lien visité
:checked cible une bouton radio, case à cocher qui est coché
:empty cible un élément qui n'a pas d'enfant ; par exemple un "block" ne contenant pas de texte
:disabled cible un élément de formulaire désactivé (qui ne peut être sélectionné)

Cette liste est loin d'être exhaustive. Il existe d'autres pseudo-classes utilisées principalement dans le cadre des tableaux et d'autres dédiées plutôt aux formulaires. Je vais les présenter dans la suite de ce chapitre.

De nouvelles pseudo-classes intéressantes pour les tableaux HTML

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 communes aux deux tableaux

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

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
tr:first-child : cible la première ligne du tableau
tr:last-child : cible la dernière ligne du tableau

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

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 du document HTML dans un iframe :

De nouveaux pseudo-élément et pseud-classes utiles pour les formulaires HTLM

Un petit exemple plutôt qu'un long discours.

Exemple de code HTML5 d'un formulaire

...
<form action = '#' method = 'post'>
<h3>Le champ de saisie sélectionné a un fond rose
<br>Une saisie invalide est borduré de rouge et vert dès qu'elle devient valide</h3>
	<label>Nom (pas de lettres accentuées)  : </label>
		<input type = 'text' required pattern = '[A-z]{2,30}' placeholder ='lettres majuscules et espaces' autofocus >
	<label>prénom  : </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 -obligatoire' maxlength = '10'>
	<label>autre n°tél (facultatif) </label>
		<input type = 'tel' pattern = '[0-9]{10}' placeholder ='dix chiffres -facultatif' maxlength = '10'>
	<label>mail : </label>
		<input type = 'email'  required placeholder ='exemple : toto@free.fr' >
	<label></label>
		<button type = 'submit' name = 'validez'>Validez</button>
</form>
...

Il s'agit d'un formulaire de soumission (avec envoi des données dans la même page).
Mais ici il n'y aucun traitement des données soumissionnées.

Nouveautés HTML5 & JavaScript

Concernant les nouveautés HTML : les nouveaux types pour le champ INPUT et les nouveaux attributs de l'élément INPUT, je vous invite à lire le chapitre ad hoc dans mon tuto sur HTML5.
HTML5 & les formulaires

Le plus souvent un formulaire HTML est accompagné de code JS.
Il y a aussi beaucoup de nouveautés en matière de traitement via JS d'un formulaire. Je ne citerai que la méthode event.preventDefault
Je vous conseille de lire le chapitre en lien : JavaScript pour les formulaires

Le code CSS pour le formulaire

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

:required : cible les champs obligatoires ; qui ont l'attribut required
:optional : cible les champs facultatifs ; qui n'a pas l'attribut required
:valid : cible les champs dont le contenu correspond au gabarit fixé par l'attribut pattern ou au type de champ
:invalid : cible les champs dont le contenu ne correspond pas au type ou au gabarit
:focus : cible l'élément survolé par la souris

On a aussi une règle de style basée sur un pseudo élément :
input::placeholder {color: purple;}
Donc le texte dans un INPUT avant saisie est en violet.

On retrouve aussi des sélecteurs d'attributs : input[type = radio] & input[type = checkbox],
Donc les boutons radio et les cases à cocher n'auront une largeur de 40% (voir première règle) mais de 5% (voir dernière règle) puisqu'en cas de conflit entre deux règles de style de même niveau hiérarchique c'est la dernière qui est prise en compte.

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

Aperçu du formulaire dans un iframe

Des pseudo-classes pour les champs de type number

Dans le document HTML ci-dessous, j'utilise des pseudo-classes pour visualiser la valité (ou non) de la saisie.

La feuille de style

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

Chaque sélecteur est composite comprenant un sélecteur d'attribut + une pseudo-classe.

Le code du formulaire (extrait)

...
<form oninput ="resultat.value = parseFloat(math.value) + parseFloat(fran.value) + parseFloat(hist.value)" >
	<h3>La note doit être comprise entre 1 et 19. 
	<br>Pour saisir une note décimale, utilisez le clavier. 
	<br>Une saisie correcte apparait en vert ; une saisie incorrecte apparait en rouge</h3>
	<p><label>Note en math : </label>
			<input type ="number" min = "1" max ="19" step ="any" name ="math">
	<br><label>Note en français : </label>
			<input type ="number" min = "1" max ="19" step ="any" name ="fran">
	<br><label>Note en histoire & géographie : </label>
			<input type ="number" min = "1" max ="19" step ="any" name ="hist">
	<br><label>Total de points obtenus :  </label>
		<output name ="resultat" /></output>
	</form>
...

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.
En effet si via la molette il est impossible de saisir une note en dehors de cet intervalle, c'est possible via le clavier ...

Notez l'emploi de l'événement de formulaire onInput et l'utilisation de l'élément OUTPUT (nouveauté HTML5).

Le rendu de ce formulaire dans un Iframe

La pseudo- classe de négation

La pseudo-classe de négation est une nouveauté CSS3 qui devrait être fort pratique car elle devrait simplifier sensiblement les feuilles de style.

Rendu d'un document HTML dans un Iframe

Tous le texte est en italic gras et centré sauf le contenu des éléments P.
Toutes les images sont centrées, de grande taille et ombrées sauf la première.

Le code de la page

Code HTML

...
<body>
	<h1>Titre principal</h1>
	<p><img src ="../images/bikini2.jpg" class ="miniature" >
		<img src ="../images/bikini5.jpg" class ="miniature" >
	Grâce à l'emploi de la pseudo-classe :not, 
	la feuille de style interne de ce document est très succincte.
	Par ailleurs pas de lien vers une feuille externe !
	<br>Les quelques règles suffisent !
	
	<h2>Titre secondaire</h2>
	<img src ="../images/bikini3.jpg"  >
	<p>Corps de texte ... 
	<br>Blabla ...
	<br>Blabla ...
	</p>
	
	<h2>Titre secondaire</h2>
	<p>Corps de texte ...
	<br>Blabla ...
	<br>Blabla ...
	</p>
	<img src ="../images/bikini21.jpg"  >
	<img src ="../images/bikini23.jpg"  >
</body>
...

On n'utilise dans ce document que les éléments BODY, H1,h2,P & IMG.

La feuille de style

* {font-size : 18px ; }
body {width : 600px ; margin : 10px 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 :40% ;  margin : 20px auto ; )

:not

body *:not(p) : cible toutes les balises enfants de BODY sauf P donc H1 & H2
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 affectées de la classe "miniature".

Traduction

Tutoriel CSS3 - sommaire

Révisions CSS2

Nouveautés CSS3

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 d'éléments enfants

Sélecteurs d'attributs

Pseudo-éléments et pseudo-classes

Les pseudo-éléments

Les pseudo-classes

Quelques pseudo-classes

De nouvelles pseudo-classes intéressantes pour les tableaux HTML

Exemples

Le code HTLM

Les règles de style communes 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

De nouveaux pseudo-élément et pseud-classes utiles pour les formulaires HTLM

Exemple de code HTML5 d'un formulaire

Nouveautés HTML5 & JavaScript

Le code CSS pour le formulaire

Aperçu du formulaire dans un iframe

Des pseudo-classes pour les champs de type number

La feuille de style

Le code du formulaire (extrait)

Le rendu de ce formulaire dans un Iframe

La pseudo- classe de négation

Rendu d'un document HTML dans un Iframe

Le code de la page

Code HTML

La feuille de style