CSS/Selektory

Z Wikibooks, biblioteki wolnych podręczników.
< CSS
Przejdź do nawigacji Przejdź do wyszukiwania

W CSS selektor (selecor) to cześć stylu która poprzedza otwierający nawias klamrowy. Określa on do jakiego elementu odnosi się dana reguła. Selektory nie mogą zostać użyte w stylu 'inline'. Poniżej przedstawione zostały rodzaje selektorów.

Selektory elementów[edytuj]

To najprostszy z selektorów. Wybiera on element na podstawie jego nazwy:

p {atrybut:wartość;}/* akapit */
div {atrybut:wartość;}/* warstwa */
table {atrybut:wartość;}/* tabela */

Selektory klas i identyfikatorów[edytuj]

Selektory elementów mają jedną wadę: można za ich pomocą przypisać styl tylko do konkretnego typu elementów. Aby móc przypisać styl do elementów pełniących konkretną rolę (wizualną) w dokumencie należy zastosować selektor klasy lub selektor identyfikatora.

Selektor klas[edytuj]

.klasa {atrybut:wartość;}

Wybiera elementy, które w atrybucie class mają wartość klasa (bez kropki). Zarówno z samą wartością klasa jak i wtedy gdy klasa jest jedną z wartości oddzielonych od siebie odstępem.

Wszystkie poniższe elementy zostaną objęte stylem przypisanym do klasy .uwydatnienie
<p class="uwydatnienie">Szczególny akapit</p>
<span class="czerwony uwydatnienie">Kolorowa sekcja</span>
<div class="duzy uwydatnienie szeroki">Ważna informacja</div>

Może istnieć wiele elementów przypisanych do jednej klasy w jednym dokumencie.

Selektor identyfikatora[edytuj]

#identyfikator {atrybut:wartość;}

Wybiera element którego id jest równe identyfikator np.

<p id="identyfikator">Oznaczony akapit</p>

Tak samo jak w przypadku selektora klas, selektor identyfikatora może dotyczyć różnych elementów. Różnica polega na tym, że element o danym id może być jeden i tylko jeden w całym dokumencie. Stąd też ten sposób oznaczania powinien być zastosowany do tych elementów ,które są unikalne dla całej strony.

Selektory uniwersalne[edytuj]

Selektory atrybutów[edytuj]

Selektory pseudoklas[edytuj]

Selektory pseudoelementów[edytuj]

Selektory potomka[edytuj]

Grupowanie selektorów[edytuj]