Selektory#
Selektor identyfikatora#
#id { /* deklaracje */ }
Języki dokumentów mogą zawierać atrybuty, które są zadeklarowane jako typ ID (type ID). To, co czyni atrybuty typu ID szczególnymi jest to, że w poprawnym dokumencie dwa atrybuty tego rodzaju nie mogą mieć identycznej wartości, niezależnie od typu elementów je zawierających; w dowolnym języku dokumentu atrybut typu ID może być używany w celu identyfikacji jego elementów. W HTML-u wszystkie atrybuty typu ID mają nazwę id
; aplikacje XML mogą nazywać atrybuty ID inaczej, ale muszą spełniać identyczne restrykcje. Który atrybut elementu jest uważany za "atrybut ID" zostało zdefiniowane przez język dokumentu.
Selektor identyfikatora (ID selector), zwany też selektorem ID, składa się ze znaku hasha ((U+0023, #)
), po którym następuje wartość ID, będąca identyfikatorem CSS. Selektor identyfikatora reprezentuje instancję elementu, który ma identyfikator pasujący do identyfikatora w selektorze ID. W dokumentach niewalidujących możliwe jest dopasowanie wielu elementów dla pojedynczego selektora ID.
Kilka teoretycznych przykładów:
/* Reprezentuje elementy h1 z atrybutem typu ID o wartości "chapter" */
h1#chapter1
/* Reprezentuje wszystkie elementy z atrybutem typu ID o wartości "chapter" */
#chapter1
/* Reprezentuje wszystkie elementy z atrybutem typu ID o wartości "z98y" */
*#z98y
Jeśli element posiada wiele atrybutów ID, to w ramach selektora ID każdy z nich musi być traktowany jak identyfikator dla tego elementu. Sytuacja taka może być osiągnięta za pomocą mieszaniny rozwiązań w postać xml:id, DOM3 Core, XML DTDs oraz przestrzeni nazw.
W przypadku XML-a informacja, który atrybut zawiera identyfikator elementu, jest zawarta w schemacie (DTD lub XML schema). W czasie parsowania XML aplikacje klienckie nie zawsze odczytują DTD, a więc mogą nie wiedzieć, co jest identyfikatorem elementu (choć aplikacja kliencka może pobierać informacje z przestrzeni nazw, która pozwala określić, które atrybuty są atrybutami ID dla tej przestrzeni nazw). Jeśli autor arkusza stylów wie lub podejrzewa, że przeglądarka nie jest w stanie określić identyfikatora w elementach, to w zastępstwie powinien stosować inny rodzaj selektorów, np. [name=p371]
zamiast #p371
.
Selektor identyfikatora ma najwyższą specyficzność spośród wszystkich dostępnych selektorów.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
#akapit2 {color: blue;}
</style>
</head>
<body>
<p>Akapit powinien mieć kolor czarny (brak id="").</p>
<p iD="akapit2">Akapit powinien mieć kolor niebieski (iD="akapit2").</p>
<p id="AkapiT2">Akapit powinien mieć kolor czarny (id="AkapiT2").</p>
</body>
</html>
W ramach uzupełnienia warto zapoznać się z opisem metody ParentNode.getElementById()
.