Autor publikacji: Virtual Patriot - Administrator

Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącznikiem

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

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

Przeznaczenie selektora `[A|="V"]`

      [atrybut|="ciąg"] { ... }

Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącznikiem odszukuje każdy element HTML, którego wartość atrybutu HTML o podanej przez nas nazwie rozpoczyna się od ciągu znaków, który podaliśmy. Dodatkowo po wspomnianym ciągu znaków może wystąpić łącznik w postaci znaku - (myślnik).

Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącznikiem 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 |= (kreska pionowa oraz znak równości), po których należy podać (pomiędzy cudzysłowem pojedynczym ' lub podwójnym ") interesujący nas ciąg znaków.

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
|=: rozpoczyna się od
"opis": ciągu znaków opis wraz z ewentualnym znakiem myślnika
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ż wartość atrybutu "title" tego elementu HTML nie rozpoczyna się od ciągu znaków "opis"
    </div>

    <p title="opis-przykładowy">
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", po którym występuje znak myślnika
    </p>

    <p title="opis przykładowy">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, mimo że wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", ponieważ po wspomnianym ciągu znaków "opis" występuje znak spacji, a nie znak myślnika
    </p>

    <div title="opis">
      tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", po którym nie występuje żaden inny znak
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML nie rozpoczyna się od ciągu znaków "opis"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", po którym występuje znak myślnika

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, mimo że wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", ponieważ po wspomnianym ciągu znaków "opis" występuje znak spacji, a nie znak myślnika

tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML rozpoczyna się od ciągu znaków "opis", po którym nie występuje żaden inny znak

Interpretacja selektora `[A|="V"]`

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