07. Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącz
Przeznaczenie selektora [A|="V"]
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"]
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 wraz z ewentualnym znakiem myślnika
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>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>
