Przejdź do treści

Selektory specjalne

Selektor identyfikatora

selektor#identyfikator { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów].

Identyfikator to wartość atrybutu id="..." nadanego selektorowi z poziomu języka (X)HTML.

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji poprzedzić je odwróconym ukośnikiem "\", np. deklaracja: selektor#B\&W\? { cecha: wartość } odpowiada identyfikatorowi: id="B&W?".

Identyfikator może wystąpić tylko raz w hierarchii drzewa dokumentu, czyli w pojedynczym dokumencie nie mogą się znaleźć dwa elementy z takimi samymi identyfikatorami!

Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy).

Przykład:

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: 
p#przyklad_identyfikator { color: red }
to akapit o podanym identyfikatorze ID: 
<p id="przyklad_identyfikator">To jest akapit.</p>
zostanie wyświetlony w kolorze czerwonym:

To jest akapit.

Dla porównania, to też jest akapit, ale bez podania identyfikatora i dlatego nie jest czerwony.

Użycie selektora uniwersalnego pozwala przypisać styl do dowolnego znacznika z określonym identyfikatorem:

*#przyklad_uniwersalny { color: red }

To jest pogrubienie, któremu został nadany identyfikator id="przyklad_uniwersalny".

W tym przypadku gwiazdkę (*) w regule stylu można pominąć:

#przyklad_uniwersalny { color: red }

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...