Table des matièresSélecteur d'attribut

Nous avons étudié beaucoup de composition de sélecteur, il en reste encore des insoupconnés !

Entrons dans le vif du Sujet

I Sélecteur d'attribut

Il est possible de pointer un élément suivant la présence et/ou la valeur d'un de ses attributs.

Syntaxe CSS

La présence d'un attribut se note entre crochet

[attrib]
et s'il doit avoir une valeur précise
[attrib='value']

Exemple
             
           
           
         
             
       
             

II Sélecteur d'attribut modulé

1) [attr~="value"]

Attribut dont la valeur appartient à une liste de valeurs séparées par des espaces

2) [attr^="value"]

Attribut dont la valeur commence "value"

Exemple
Sélectionner les liens pointant vers un site externe

Imprimer la source des liens

Ne pas faire apparaître le contenu des liens s'il s'agit de javascript

3) [attr$="value"]

Valeur de l'attribut se finissant par "value"

4) [attr*="value"]

Valeur de l'attribut contenant "value" (n'importe où)

Exemple
Notifier le type des fichiers pdf pointés par un lien en affichant "(PDF)" après le lien

Element donc l'attribut class contient le mot bouton, n'importe où

5) not

input:not([type="radio"])

Tous les éléments de formulaire input qui ne sont pas de type radio

6) Plusieurs sélecteurs d'attribut img[alt][title]

Plusieurs sélecteurs d'attribut peuvent être utilisés dans le même sélecteur. Ceci permet de faire correspondre contre plusieurs attributs différents pour le même élément.

exemple : La règle suivante serait applicable à tous les éléments blockquote qui ont un attribut de classe dont la valeur est exactement "devis", et un attribut cite (indépendamment de sa valeur): blockquote[class=quote][cite] { color:#f00; }

Exemple
Faire disparaître tous les éléments de formulaire qui sont coché et de classe "uneseulefois".
Avez-vous atteint les objectifs ?
Vous devez :
  • savoir cibler les éléments selon la présence d'un attribut et/ou de sa valeur
Testez-vous