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.

LES 30 SÉLECTEURS CSS À CONNAÎTRE POUR VOS WEB DESIGNS

3 articles à découvrir pour se perfectionner en Web Design

Partager cet article

Facebook
Twitter
LinkedIn
WhatsApp

Une réponse

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.