Selectori de atribute CSS. Selector CSS [attribute~="value"]. Selector CSS [attribute|="value"].

Selector CSS [attribute~="value"]

Selectorul [attribute~="value"] este utilizat pentru a selecta elemente cu o valoare de atribut care conține un cuvânt specificat.

Următorul exemplu selectează toate elementele cu un atribut title care conține o listă de cuvinte separată de spațiu, dintre care unul „flower”:

Exemplu:

[title~="flower"] {
  border: 5px solid yellow;
}

Exemplul de mai sus va potrivi elementele cu title = "flower", title = "summer flower", și title = "flower new", dar nu title = ""my-flower" sau title = "flowers".

Selector CSS [attribute|="value"]

Selectorul [attribute|="value"] este utilizat pentru a selecta elementele cu atributul specificat începând cu valoarea specificată.

Următorul exemplu selectează toate elementele cu o valoare de atribut class care începe cu "top":

Notă: Valoarea trebuie să fie un cuvânt întreg, fie singur, cum ar fi class = "top", sau urmat de o cratimă (-), cum ar fi class = "top-text"!

Exemplu:

[class|="top"] {
  background: yellow;
}