Ressources » Ressources techniques » CSS » Appliquer CSS sur une classe prise comme attribut, si correspondance avec une sous-chaîne de sa valeur

Appliquer CSS sur une classe prise comme attribut, si correspondance avec une sous-chaîne de sa valeur

1 – Extrait de https://www.w3.org/TR/selectors-3/#attribute-substrings

« Substring matching attribute selectors

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

[att^=val] Represents an element with the att attribute whose value begins with the prefix « val ». If « val » is the empty string then the selector does not represent anything.

[att$=val] Represents an element with the att attribute whose value ends with the suffix « val ». If « val » is the empty string then the selector does not represent anything.

[att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring « val ». If « val » is the empty string then the selector does not represent anything. »

[…]

Exemples :

The following selector represents an HTML object, referencing an image:

object[type^="image/"]

The following selector represents an HTML anchor a with an href attribute whose value ends with « .html »:

a[href$=".html"]

The following selector represents an HTML paragraph with a title attribute whose value contains the substring « hello »:

p[title*="hello"]

Exemple

*[class^="prefix"] {
   color : red;
}