Selektor typu atrybutu
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - attribute presence and value selectors (LV3)
Przeznaczenie selektora [A]
[atrybut] { ... }
Selektor typu atrybutu odszukuje każdy element HTML, który posiada atrybut HTML podanego przez nas typu.
Selektor typu atrybutu tworzymy za pomocą nawiasu kwadratowego [], w którym należy umieścić nazwę interesującego nas atrybutu HTML.
Informacje techniczne o selektorze [A]
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor [A]
[title] {
color:red;
}Wyjaśnienie przykładowej reguły CSS
[title] { color:red; }
[title]-
do każdego elementu HTML, który posiada atrybut
title 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] {
color:red;
}
</style>
</head>
<body>
<div title="opis przykładowego elementu HTML">
tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "title"
</div>
<p id="lipiec" title="lato">
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ jednym z atrybutów tego elementu HTML jest atrybut "title"
</p>
<div class="czerwiec">
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "title"
</div>
</body>
</html>Rezultat
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ jednym z atrybutów tego elementu HTML jest atrybut "title"
Interpretacja selektora [A]
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak