Selektory specjalne - CSS
Selektor identyfikatora <... id>
W jaki sposób określić specjalny wygląd pojedynczego elementu na stronie WWW?
selektor#identyfikator { cecha: wartość }Identyfikator to wartość atrybutu
id="..." nadanego selektorowi z poziomu języka 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 }Pytania i odpowiedzi
Co to identyfikator CSS?
Identyfikator CSS to nazwa, która jest przypisana do konkretnego elementu HTML na stronie. Jest to unikalny identyfikator, który może być używany do stylizacji lub manipulacji tym konkretnym elementem za pomocą CSS lub JavaScript.
Jak zdefiniować identyfikator w elemencie DIV?
Aby zdefiniować identyfikator w elemencie <div>, używamy atrybutu id="...". Na przykład: <div id="moje-id">Treść</div>.
Jak odnieść się do ID w CSS?
Aby odnieść się do atrubutu id="..." w CSS, używa się znaku krzyżyka (#) przed nazwą identyfikatora. Na przykład: #moje-id { color: red; }.
Kiedy stosuje się selektor identyfikatora?
Selektor identyfikatora stosuje się, gdy chcemy przypisać style do konkretnego, unikalnego elementu na stronie. Nazwy identyfikatorów nie mogą się powtarzać w tym samym pliku HTML, więc selektor identyfikatora jest używany, gdy chcemy zastosować style tylko do jednego określonego elementu.
Jak wybrać element o identyfikatorze id="demo"?
Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }.
Kiedy CLASS a kiedy ID?
Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.