W CSS selektor (selector) 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

 

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

 

Selektory klas i identyfikatorów

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

 

.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

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

 

ŹRÓDŁO