CSS/Selektory

< CSS

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ówEdytuj

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ówEdytuj

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 klasEdytuj

.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 identyfikatoraEdytuj

#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 uniwersalneEdytuj

Selektory atrybutówEdytuj

Selektory pseudoklasEdytuj

Selektory pseudoelementówEdytuj

Selektory potomkaEdytuj

Grupowanie selektorówEdytuj