Autor publikacji: Virtual Patriot - Administrator

Selektor atrybutu o danej wartości

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - attribute presence and value selectors (LV3)

Przeznaczenie selektora `[A="V"]`

      [atrybut="wartość"] { ... }

Selektor atrybutu o danej wartości odszukuje każdy element HTML, którego atrybut HTML o podanej przez nas nazwie posiada dokładnie tą wartość, którą podaliśmy.

Selektor atrybutu o danej wartości 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ć jeden znak = (znak równości), po którym należy podać (pomiędzy cudzysłowem pojedynczym ' lub podwójnym ") interesującą nas wartość.

Informacje techniczne 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
=: jest równa
"opis": wartości 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, mimo że ten element HTML posiada atrybut "title", ponieważ wartością atrybutu "title" tego elementu HTML jest wartość "przykładowy opis", a nie wartość "opis"
    </div>

    <p class="opis">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "title" o wartości "opis"
    </p>

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

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML posiada atrybut "title", ponieważ wartością atrybutu "title" tego elementu HTML jest wartość "przykładowy opis", a nie wartość "opis"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "title" o wartości "opis"

tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybutu "title" o wartości "opis"

Interpretacja selektora `[A="V"]`

: tak
: tak
: tak
: tak
: tak
: tak