Editions ENI Livres | Vidéos | e-Formations
Les nouveaux sélecteurs CSS3
Les sélecteurs CSS2
1. La déclaration des CSS
Vous le savez, les CSS permettent de mettre en forme et de mettre en page vos sites web. Vous pouvez déclarer vos styles CSS à trois endroits classiques :
-
Dans un élément <style> placé dans l’élément <head> de chaque page web.
-
Dans un fichier spécifique ayant pour extension .css.
-
Directement dans l’élément HTML qui doit être mis en forme, avec l’attribut style.
L’HTML5.2 permet maintenant de placer un élément <style> dans la page, c’est-à-dire dans l’élément <body>. Voici un exemple parfaitement valide :
<body>
<p>Vehicula Mollis Fermentum...</p>
<style>
p {
margin: 0;
}
</style>
<p>Malesuada Pellentesque Fermentum Ligula...</p>
</body> 2. Les sélecteurs
Pour rappel, la recommandation CSS 2.1 propose un large éventail de sélecteurs.
-
Sélecteur universel : pour appliquer un style à l’ensemble des éléments HTML de la page. Syntaxe : * {...}.
-
Sélecteur d’élément : pour appliquer un style à un élément...
Les nouveaux sélecteurs CSS3
La spécification CSS3 propose de nouveaux sélecteurs. Le module des sélecteurs est terminé et le W3C nous propose donc une Recommendation datée du 6 novembre 2018. Voici son URL : https://www.w3.org/TR/selectors-3/
Le sélecteur adjacent général
La CSS2 nous proposait le sélecteur adjacent qui permet de « cibler » le frère immédiat d’un élément. Exemple de syntaxe : h1+h2 {...}. Cela permet d’appliquer un style spécifique au seul premier h2 suivant le h1.
Avec les CSS3, l’adjacente ne doit pas forcément être immédiate entre les deux éléments, il peut y avoir d’autres éléments entre, et le style s’applique aux autres éléments spécifiés suivants.
Voici la syntaxe : h1~h2 {...}.
Exemple du sélecteur :
h1~h2 {font-style: italic}; Exemple du code :
<h1>Mon titre de niveau 1</h1>
<p>Un paragraphe de texte</p>
<h2>Un titre de niveau 2</h2>
<h2>Un autre titre de niveau 2</h2> Voilà l’affichage obtenu :
Il y a bien un texte en italique pour les deux éléments <h2> placés après le <h1> et avec un autre élément (<p>) entre.
Le sélecteur d’attribut
1. L’objectif
Le sélecteur d’attribut existe depuis les CSS2. Avec les CSS3, ces possibilités sont étendues.
Exemples de syntaxe :
-
[attribut^="valeur"] : pour appliquer un style à un élément dont l’attribut attribut commence exactement par valeur.
-
[attribut$="valeur"] : pour appliquer un style à un élément dont l’attribut attribut finit exactement par valeur.
-
[attribut*="valeur"] : pour appliquer un style à un élément dont l’attribut attribut contient au moins une fois valeur.
2. Des liens vers une adresse e-mail
Dans un premier exemple, nous allons voir comment mettre en forme de manière spécifique uniquement les liens vers des adresses de messagerie.
Voilà les styles utilisés. Nous voulons cibler les liens ayant comme attribut mailto pour leur appliquer une mise en forme spécifique : une petite icône.
A {
text-decoration: none;
}
a[href^="mailto"] {
background: url(personne.png) left center no-repeat;
padding-left: 30px;
} Voilà le code HTML de la page. Les deux premiers liens ont l’attribut mailto, pas le troisième.
<h3>Vos interlocuteurs :</h3>
<p><a href="mailto:jdupond@truc.fr">Jean...La pseudo-classe d’ancre
1. L’objectif
Lorsque vous créez des liens au sein de la même page, vous utilisez une syntaxe de cette forme :
<a href="#introduction">Allez à l'introduction</a> Avec la nouvelle pseudo-classe :target, vous pouvez mettre en évidence l’ancre que l’utilisateur a utilisée.
2. La mise en place
Voici un exemple très simple : vous avez un document assez long, dans lequel vous avez inséré un sommaire en début de page, avec des liens vers des ancres nommées dans les différentes parties de la page.
Voilà la structure HTML :
<p><a href="#introduction">Introduction</a> | <a
href="#resultats">Introduction</a> | <a
href="#conclusion">Conclusion</a></p>
<h3><a id="introduction">Introduction</a></h3>
<p>Maecenas sed...</p>
...
<h3><a id="resultats">Résultats</a></h3>
<p>Vivamus sagittis lacus...</p>
...
<h3><a id="conclusion">Conclusion</a></h3>
<p>Donec ullamcorper nulla...</p>
... Voilà les styles CSS. L’utilisation d’un lien dans le sommaire va appliquer une couleur d’arrière-plan dorée à sa cible.
a { ...Les pseudo-classes de structure
1. L’objectif
Le W3C nous propose toute une série de pseudo-classes de structure qui vont nous permettre de cibler finement les éléments structurants de nos pages web.
2. La racine de la page
La pseudo-classe :root permet de cibler la racine de la page web, à savoir l’élément <html>. La différence avec le sélecteur d’élément html est simple, dans la cascade, l’importance de :root lui est supérieure.
3. Le dernier élément enfant
Les CSS2 proposaient la pseudo-classe :first-child pour cibler le premier élément enfant d’un élément parent. Les CSS3 proposent une « ribambelle » de pseudo-classes pour cibler très finement tel ou tel élément enfant.
La pseudo-classe :last-child permet de cibler le dernier enfant d’un élément parent. C’est le pendant de :first-child. Ces deux pseudo-classes sont maintenant très pratiques pour gérer la fusion des marges de paragraphe dans une boîte <div>.
Voici la structure HTML d’une page :
<div id="special">
<p>Molestie suscipit...</p>
<p>ut facilisis duis at delenit...</p>
<p>Velit quis, dolore...</p>
<p>Suscipit, elit adipiscing dolore ea eum...</p>
</div> Voici le style CSS pour la boîte <div> :
#special {
width: 400px;
border: solid 1px black;
} Voilà l’affichage résultant :
La marge supérieure du premier paragraphe et la marge inférieure du dernier paragraphe sont affichées dans la boîte <div>.
Pour ne pas avoir de marge, voilà le sélecteur utilisé :
#special p:first-child, #special p:last-child {
margin-top: 0;
margin-bottom: 0;
} Voilà l’affichage avec l’utilisation des deux pseudo-classes :
Les marges haute et basse sont bien à 0.
4. Les éléments enfants
Pour voir l’application de cette pseudo-classe, nous prendrons pour exemple une liste <ul>.
Voilà le code HTML de cette liste toute simple :
<ul>
<li>Rouge</li> ...