Par exemple, je peux cibler un lien balise <a> selon le contenu de son attribut href (le lien).
Note : si « val » est une chaîne vide, il ne représentera jamais rien.

[att] 

Représente un élément avec l’attribut ‘att’, quel que soit la valeur de l’attribut. 

a[download]::before {
	content:'\f56d';
	opacity:.8
}

Affiche une icône de téléchargement si la balise a contient l’attribut ‘download’

[att=val] 

Représente un élément avec l’attribut ‘att’, dont la valeur est exactement “val”. Ci-après, la valeur est le nom de domaine du site.

a[href="https://www.domaine.ext"]

[att~=val]

Représente un élément avec l’attribut ‘att’, dont la valeur est une liste de mots séparés par des espaces, dont l’un est exactement « val ». Si « val » ne contient que des espaces, il ne représentera jamais rien (puisque les mots sont séparés par des espaces).

/*HTML*/
<div class="btn primary">Button 1</div>
<div class="btn secondary">Button 2</div>
<div class="btn primary large">Button 3</div>

/*HTML*/
/* Selection des éléments où class contient 'primary' comme un mot entier */
div[class~="primary"] {
    background-color: blue;
    color: white;
    padding: 10px;
}

Ici, Matched Elements:
✅ div class= »btn primary »>Button 1
✅ div class= »btn primary large »>Button 3
🔸 Not Matched: ❌ div class= »btn secondary »>Button 2 (car « primary » n’est pas dans la liste)

[att|=val-] 

Représente un élément avec l’attribut ‘att’, sa valeur étant soit exactement « val » ou commençant par « val » (et immédiatement suivi de « – » (U+002D)). Cette classe est principalement destinée à permettre la correspondance des sous-codes de langue (par exemple, l’attribut hreflang sur l’élément a en HTML).

Sélecteurs de sous-chaînes d’attribut

Trois autres sélecteurs d’attribut permettent de “pointer” des sous-chaînes (fragments de texte breton mais pas que) de caractères dans la valeur d’un attribut :

[att^=val] 

Représente un élément avec l’attribut ‘att’ dont la valeur commence par le préfixe « val ». Si « val » est vide alors le sélecteur ne représente rien. 

a[href^="tel:"]::after {
	content:'';
}

Une URL qui commence par tel: (numéro cliquable)

[att$=val] 

Représente un élément avec l’attribut ‘att’ dont la valeur termine par le suffixe « val ».

a[href$=".pdf"]::before {
	content:'\f1c1';
}

Affiche une icône avant un lien vers un PDF

[att*=val] 

Représente un élément avec l’attribut ‘att’ dont la valeur contient au moins une instance de la sous-chaîne “val”.

/*HTML*/
<input type="text" placeholder="Email address">
<input type="text" placeholder="Enter your email"> 
<input type="text" placeholder="Username">

/*CSS*/

/* Sélection des éléments où le placeholder contient 'email' */
input[placeholder*="email"] {
    border: 2px solid blue;
    background-color: #eef;
}

Ici, Éléments associés :
✅ input type= »text » placeholder= »Email address »
✅ input type= »text » placeholder= »Enter your email »
🔸 Non associés : ❌ input type= »text » placeholder= »Username »