Selektory CSS

W artykule poruszymy wymienione poniżej tematy.

Użycie selektorów w celu zastosowania stylów.
Selektory kontekstowe.
Klasy i identyfikatory.

Selektory

Każdy znacznik może być użyty w charakterze selektora CSS, a reguły zdefiniowane dla tego selektora będą zastosowane względem wszystkich egzemplarzy danego znacznika na stronie. Istnieje możliwość dodania reguły do znacznika <b> określającej użycie w nim zwykłej czcionki lub też wyświetlenia kursywą każdego akapitu na stronie, co wymaga dodania odpowiedniego stylu dla znacznika <p>. Przypisanie stylów znacznika <body> przez użycie selektora body pozwala na wprowadzenie ustawień dla całej strony. Jednak istnieje możliwość stosowania styłów na znacznie dokładniejszym poziomie, na wiele różnych sposobów oraz definiowania stylów dla różnorodnych typów elementów za pomocą tylko jednego selektora.

Istnieje możliwość jednoczesnego przypisania stylów do więcej niż tylko jednego selektora. Przyjmujemy założenie, że chcemy, aby na przykład akapity, listy nieuporządkowane oraz listy uporządkowane na stronie wyświetlały tekst w czarnym kolorze. Zamiast tworzyć oddzielne reguły dla wymienionych elementów, można zdefiniować jedną, która będzie miała zastosowanie dla tych wszystkich elementów. Poniżej przedstawiłem tego rodzaju rozwiązanie.

p, ol, ul { color: black; }

Rozdzielona przecinkami lista wskazuje, że styl powinien być zastosowany dla wszystkich wymienionych powyżej znaczników.

Selektory kontekstowe

Dostępne są selektory kontekstowe. Tego rodzaju selektory są wykorzystywane w celu zastosowania stylów jedynie do elementów zagnieżdżonych wewnątrz innych, wskazanych elementów.

ol em { color: blue; }

Pominięcie przecinka między wymienionymi elementami oznacza, że ta reguła będzie miała zastosowanie jedynie dla elementów <em> zagnieżdżonych wewnątrz list uporządkowanych. Spójrz na dwie nieco odmienne reguły.

li em { font-style: normal; font-weight: bold;}
p em { font-style: italic; font-weight: normal;}

w tym przypadku znaczniki <em> pojawiające się wewnątrz znaczników <li> będą wygenerowana pogrubioną czcionką. Natomiast gdy znacznik <em> pojawi sie w elemencie <p>, wówczas jego zawartość będzie zapisane kursywą. Spójrz na jeszcze jeden przykład.

em { color: green; }
li em { font-style: normal; color: red;}
p em { font-style: italic; color: blue;}

W tym przypadku zagnieżdżone style nadpisują styl domyślny znacznika <em>, ponieważ stanowią znacznie dokładniejszą definicję stylu. Zawartość znaczników <em> niespełniających kryteriów reguł zagnieżdżonych zostanie wyświetlona w kolorze zielonym. Te zagnieżdżone reguły będą nadpisywały mniej dokładne reguły i dlatego treść znaczników <em> znajdujących się wewnątrz znaczników <p> będzie wyświetlona w kolorze niebieskim. Natomiast wewnątrz elementów listy treść znaczników <em> będznie wyświetlona kolorem czerwonym.

Klasy i identyfikatory

Czasamy trzeba zastosować własną klasyfikację w CSS. Mamy dwa atrybuty obsługiwane przez wszystkie znaczniki HTML: class i id. Atrybut class jest wykorzystywany do klasyfikacji elementów, natomiast atrybut id do przypisywania identyfikatorów w celu zapewnienia unikatowości elementów.

W celu zastosowania selektora dla klasy należy użyć kropki w nazwie klasy w arkuszu stylów. Dlatego też jeśli masz następujący znacznik:

<div class='sidebar'>Dowolny tekst</div>

wówczas regułę możesz zapisać w poniżczy sposób.

.sidebar { color: blue; font-weight: bold; }

Każdy element o klasie sidebar będzie wyświetlony pogrubioną czcionką w kolorze niebieskim. Jeżeli tego rodzaju styl chczesz zastosować jedynie dla elementów <div> pasku bocznego, wówczas podczas definiowania reguły możesz podać nazwę elementu i klasy.

div.sidebar { color: blue; font-weight: bold; }
p.sidebar { color: red; font-weight: bold; }

Dwie powyższe reguły można zapisaś w następujący sposób:

.sidebar { font-weigth: bold; }
div.sidebar { color: blue; }
p.sidebar { color: red; }

Wszystkie elementy klasy sidebar będą wyświetlone czcionką pogrubioną, tekst znaczników <div> wraz z klasą sidebar zostanie wyświetlony w kolorze niebieskim, natomiast akapity z podaną klasą w kolorze czerwonym.

Kiedy chcesz zdefiniować style tylko dla pojedynczego elementu, prypisz mu indentyfikator.Element musi być unikatowy na stronie, czyli na danej stronie może istnieć wyłącznie jeden element o podanym identyfikatorze. Naprzykład, strona będzie miała tylko jedną stopkę. W celu jej identyfikacji wykorzystamy atrybut id.

<div id='footer'>
Dowolny tekst
<div>

Poniżej przykład reguły CSS, które będą stosowane dla stopki przez odwołanie się do przypisanego identyfikatora.

#footer { text-align: center; }

Podczas odwoływania się do identyfikatorów w arkuszach stylów konieczne jest umiedzczenie na początku znaku # zapewniającego możliwość odróżnienia od nazw klas elementów.

Poprzednia Główna strona