Ostatnio edytowany:

Selektor atrybutu, którego wartość posiada dany wyraz

Autor: Virtual Patriot

Przeznaczenie selektora [A~="V"]

      [atrybut~="wyraz"] { ... }
    

Selektor atrybutu, którego wartość posiada dany wyraz odszukuje każdy element HTML, którego wartość atrybutu HTML o podanej przez nas nazwie posiada wyraz, który podaliśmy.

Mowa tu między innymi o wyrazie, który został oddzielony przynajmniej jednym białym znakiem od ewentualnych pozostałych wyrazów występujących w wartości danego atrybutu HTML.

Selektor atrybutu, którego wartość posiada dany wyraz tworzymy za pomocą nawiasu kwadratowego [], w którym należy umieścić nazwę interesującego nas atrybutu HTML, po której należy umieścić znaki ~= (tylda oraz znak równości), po których należy podać (pomiędzy cudzysłowem pojedynczym ' lub podwójnym ") interesujący nas wyraz.

Dodatkowe techniczne informacje o selektorze [A~="V"]

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor [A~="V"]

[title~="opis"] {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      [title~="opis"] { color:red; }
    
title

Do każdego elementu HTML, którego wartość atrybutu title

~=

posiada w sobie

"opis"

wyraz opis

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      [title~="opis"] {
        color:red;
      }
    </style>
  </head>

  <body>

    <div title="przykładowy-opis">
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ze względu na znak myślnika występujący w wartości atrybutu "title" tego elementu HTML, wartość atrybutu "title" tego elementu HTML traktowana jest przez przeglądarkę internetową jako jeden cały wyraz o wartości "przykładowy-opis"
    </div>

    <p title="przykładowy opis">
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML posiada w sobie wyraz "opis"
    </p>

    <div title="opis">
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML posiada w sobie wyraz "opis"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ze względu na znak myślnika występujący w wartości atrybutu "title" tego elementu HTML, wartość atrybutu "title" tego elementu HTML traktowana jest przez przeglądarkę internetową jako jeden cały wyraz o wartości "przykładowy-opis"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML posiada w sobie wyraz "opis"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML posiada w sobie wyraz "opis"

Interpretacja selektora [A~="V"]

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak