Ostatnio edytowany:

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

Autor: Virtual Patriot

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.

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

|=

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"]

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak