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

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur whatsapp
WhatsApp

Une réponse

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *