04. Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków - CSS3

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

Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków 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.

Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków 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 ^= (daszek 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

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

^=

rozpoczyna się od

"opis"

ciągu znaków 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>Kurs CSS</title>

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

  <body>

    <div title="opisElementuHTML">
      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"
    </div>

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

    <p title="brudnopis">
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ wartość atrybutu "title" tego elementu HTML nie rozpoczyna się od ciągu znaków "opis"
    </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"
    </div>

  </body>
</html>

Rezultat

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

Previous03. Selektor atrybutu, którego wartość posiada dany wyraz Next05. Selektor atrybutu, którego wartość kończy się danym ciągiem znaków - CSS3

Last updated 1 month ago

hashtagPrzeznaczenie selektora [A^="V"]

hashtagInformacje techniczne o selektorze [A^="V"]

hashtagPrzykładowa reguła CSS, selektor [A^="V"]

hashtagWyjaśnienie przykładowej reguły CSS

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

hashtagRezultat

hashtagInterpretacja selektora [A^="V"]