CSS - Les sélecteurs d'attribut CSS - Les sélecteurs d'attribut

Les sélecteurs d’attribut permettent de cibler un élément selon la présence d’un attribut ou selon la valeur donnée d’un attribut.

Présence d’un attribut


/* Les éléments  avec un attribut title */
a[title] {
  color: purple;
}

Selon la valeur donnée d’un attribut


/* Les éléments  avec un href qui correspond */
/* à "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Les éléments  dont href contient "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Les éléments  dont href finit par ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Les éléments  dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
  padding: 2px;
}

Publier 23 juin 2019 par sm2017 dans CSS - Mise en place Commentaires fermés

CSS – Les sélecteurs d’attribut

Présence d’un attribut

Selon la valeur donnée d’un attribut