CSS : nouveaux sélecteurs introduits par CSS3
Le sélecteur 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é.
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 ":").
Les pseudo-éléments pour le W3C sont au nombre de 4 :
- ::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.
<![CDATA[
<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; }
Les nouveautés :
- 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 : sélecteur qui cible la première ligne du tableau
- tr:last-child : sélecteur qui 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 propres au deuxième tableau identifié "tableau2"
<![CDATA[
#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 !
Les nouveautés :
- border-collapse : collapse : fusion des bordures de cellules contigues ; 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) : sélecteur qui cible les lignes paires du tableau
- tr:nth-child(odd) : sélecteur qui cible les lignes impaires du tableau
: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 !
Testez ce code !
Nouveaux sélecteurs pour les formulaires
Le code HTML de l'exemple
<![CDATA[
<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.
Outre les valeurs anciennes (text, hidden, password, button, submit, reset) il existe désormais les types suivants :
- 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).
Une expression régulière comprend deux parties :
- entre crochets les caractères autorisés
- entre accolades le nombre de caractères autorisés
Observons les expressions régulières dans le formulaire :
- [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;}
...
On découvre de nombreuses nouvelles pseudo-classes dédiées aux formulaires :
- :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.
On retrouve aussi des sélecteurs adjacents. Ainsi :
- 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.
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.
Exemple
Observez le rendu !
Tout les titres sont en italique.
Toutes les images sont centrées, de grande taille et ombrées sauf la première (classe "miniature" !
Le code HTML
<![CDATA[
<h1>Titre principal</h1>
<p>Corps de texte ...
<img src ="../images/bikini2.jpg" class ="miniature" >
<img src ="../images/bikini3.jpg">
<h2>Titre secondaire</h2>
<p>Corps de texte ...
<h2>Titre secondaire</h2>
<p>Corps de texte ...
<img src ="../images/bikini4.jpg" >
<img src ="../images/bikini3.jpg" >
]]>
La feuille de style
body { width : 600px ; margin : auto ; }
body *:not(p) {font-style : italic; }
img.miniature {width : 10% ; float : left ; margin : 1%; }
img:not(.miniature)
{box-shadow : 10px 10px 10px gray ; display : block ; width :60% ;
margin : 10px auto 10px auto ; )
Deux sélecteurs basées sur :not :
- body *:not(p) : cible toutes les balises enfants de BODY sauf les balises P. Donc le texte est en italique sauf pour celui balisé par P.
- 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".
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.
Lorsqu'un champ de type number a les attributs min & max, il est possible d'utiliser les pseudo-classes :
- :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
<![CDATA[
...
<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 en vert, sinon en rouge.
Testez ce code !