Les 30 Sélecteurs CSS à connaître pour vos Web Designs
2ème partie
Les 10 sélecteurs CSS suivants
Continuons notre découverte passionnante et enrichissante du monde de la programmation HTML / CSS. Les 10 propriétés CSS suivantes vous permettront d’affiner vos requêtes et grâce à elles vous pourrez réaliser tous les Web Design que vous souhaitez. C’est parti !
11 - X[href="foo"]
a[href=
"https://www.carbonnel
-media.com"] {
color: green;
}Ce sélecteur permet de ne styliser que les liens qui pointent vers une adresse URL en l’occurence ici, tous ceux qui pointent vers www.carbonnel-media.com. Tous les autres ne seront pas affectés par ce sélecteur.
Attention : Seuls ceux qui pointent vers l’adresse complète seront affectés. Si l’adresse est incomplète (carbonnel-media.com par exemple), ils ne seront pas touchés.
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
12 - X[href*="carbonnel-media"]
a[href*="carbonnel-media"] {
color: #1e001a;
}
Voici un sélecteur plus global. L’étoile signifie que le paramètre (carbonnel-media.com) peut apparaître n’importe où dans la valeur de l’attribut. De cette façon, carbonnel-media.com, tuto.carbonnel-media.com ou services.carbonnel-media.com et évidemment carbonnel-media.com seront pris en compte. Attention tout de même car cette déclaration peut conduire à traiter des cas qui ne sont pas souhaitables. Il faudra alors réduire la portée en utilisant ^ et $ pour encadrer la chaine de caractères et en limiter la portée.
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
13 - X[href^="https"]
a[href^="https"] {
background: url(chemin/vers/icon.png) no-repeat;
padding-left: 5px;
}
Cette directive va appliquer un style aux liens qui pointent vers une adresse en HTTPS, et uniquement à ceux-ci. L’utilisation de cette directive est généralement de faire précéder le lien d’une icône tel qu’un cadenas par exemple. Le symbole ^ signifie que nous cherchons la chaîne à partir du début du lien.
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
14 - X[href$=".png"]
a[href$=".png"] {
color: green;
}
Voici encore un sélecteur qui utilise une expression régulière: le symbole $. Il cible la fin de la chaîne de caractères. Dans cet exemple nous recherchons tous les liens qui pointent vers une image png
compatibilité
Firefox
Chrome
Opera
Safari
IE6+
15 - X[data-*="foo"]
a[data-filetype="image"] {
color: green;
}
Que faire si nous voulons cibler les images PNG, JPEG et GIF ? Et bien nous pourrions créer plusieurs sélecteurs comme ceux-là :a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".gif"] {
color: green;
}
C’est une solution compliquée et source d’erreurs possibles. Alors nous pouvons au lieu de cela utiliser un attribut personnalisé. Nous pouvons par exemple créer notre propre data-filetype pour chaque lien qui pointe vers une image.
<a href="chemin/vers/l/image" data-filetype="image">Lien vers l'image</>
Il suffit alors d’utiliser ce sélecteur standard pour appliquer un style à tous ces liens.
a[data-filetype="image"] {
color:green;
}
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
16 - X[foo~="bar"]
a[data-info~="externe"] {
color:green;
}
a[data-info~="image"] {
border: 1px solid green;
}
Voici une directive qui va en laisser certains pantois. Peu le savent, mais le tilde ~ permet de cibler un attribut qui possède une liste de valeurs séparées par des espaces.
Nous pouvons donc créer un attribut data-info qui sera composé d’une liste de valeurs que l’on souhaite suivre. Dans notre exemple des liens externes et des images.
<a href="chemin/vers/l/image.jpg" data-info="externe image">Cliquez-moi>
Grâce à ce schéma, nous pouvons maintenant cibler tous les liens qui ont tout ou partie de ces valeurs en utilisant le sélecteur tilde ~
/* on cible l'attribut data-info qui contient la valeur"externe" */
a[data-info ~="externe"]
color:green;
}
/* et qui contient la valeur "image" */
a[data-info~="image"] {
border: 1px solid black;
}
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
17 - X:checked
input[type=radio]:checked {
border: 1px solid green;
}
Cette pseudo-classe ne ciblera qu’un élément de la page qui possède l’état Checked, par exemple un bouton radio ou une case à cocher.
compatibilité
Firefox
Chrome
Opera
Safari
IE9+
18 - X:after
Les sélecteurs before et after font parties des sélecteurs les plus utilisés en CSS. et on trouve chaque jour de plus en plus d’utilisations possibles; pourtant ils ne font qu’ajouter du contenu avant et après un élément.
compatibilité
Firefox
Chrome
Opera
Safari
IE8+
19 - X:hover
div:hover {
background: green;
}
En anglais l’évènement hover est généré lorsque l’on survole un élément de l’interface. La propriété est donc appliquée à cette occasion. Une application typique de cette directive est d’ajouter une bordure basse sur un lien lorsqu’on le survole.
a:hover {
border-bottom: 1px solid green;
}
compatibilité
Firefox
Chrome
Opera
Safari
IE7+
20 - X:not(selector)
div:not(#conteneur) {
color : blue;
}
La pseudo-classe negation est très intéressante. Dans l’exemple ci-dessus, on sélectionne tous les conteneurs sauf celui qui a comme ID conteneur.
Et si par exemple on souhaite appliquer un style à tous les éléments sauf aux paragraphes, nous pouvons faire:*:not(p) {
color: red;
}
compatibilité
Firefox
Chrome
Opera
Safari
IE9+
Nous voici arrivé au terme de cette deuxième fournée de sélecteurs CSS. Il vous appartient de bien les étudier de manière à trouver pour chaque résultat que vous souhaitez la technique la plus simple et la plus efficace. Je vous renvois à mon article précédent si vous prenez le train en route, qui décrit les 10 premiers sélecteurs CSS à connaître et à retenir. A bientôt pour la troisième partie de cet article.
Une réponse