Podstawowe definicje

Kaskadowe arkusze stylów służą do stylowania dokumentów takich jak strony internetowe. Arkusze zawierają reguły, do których stosują się przeglądarki podczas ładowania strony, dokumentu XML lub innego dokumentu napisanego w kompatybilnym języku.

Arkusz stylów można podzielić na dwie główne części: selektor i deklaracja. Selektor odnosi się do odpowiadającego tagu w danym języku, na przykład w HTML p odnosi się do znacznika <p>.
Deklaracja to informacja o stylowaniu jakiego przeglądarka powinna użyć napotykając element pasujący do selektora.

Istnieje wiele różnych deklaracji, ale w przypadku tego artykułu interesują nas tylko selektory i to na nich się skupię.

Podstawy selektorów CSS1

Głównym zadaniem selektora jest wskazywać na obiekty czy fragmenty tekstu, które designer chciałby ostylować. Dla przykładu, jeśli chcemy by nasze nagłówki były napisane fontem i kolorem innym niż reszta elementów strony, na witrynie, zawierającej kilka tysięcy dokumentów, wystarczy, by wszystkie odnosiły się do modyfikowanego arkusza styłów, w którym dopiszemy:

• h1{font-family: Georgia, serif; color: #333;}

Od tej pory, wszystkie tagi <h1> w witrynie, będa napisane Georgią w kolorze ciemnoszarym.

Okazjonalnie designerzy potrzebują wybierać elementy po klasie bądź unikalnych identyfikatorach. Załóżmy, że na naszej stronie, mamy serię takich samych elementów (na przykład paragrafów), którym chcielibyśmy zmienić stylowanie. Do tego służą klasy.

• p.specjalne {color: #f00;}

dla <p class="specjalne">

Jeśli natomiast w jednym dokumencie dany element występuje tylko raz, możemy skorzystać z unikalnego identyfikatora

• p#specjalny {color: #f90;}

dla <p id="specjalne">

W CSS1 dodano także kilka pseudo-klas dla elementu <a>: :link, :visited, :active, :hover i :focus. Otrzymaliśmy także dwa pseudo-elementy: ::first-letter i ::first-line, służące do stylowania pierwszej litery i pierwszej linii zawartej między dwoma tagami. Pseudo-elementy można wyróżnić po dwóch dwukropkach. Odnoszą się tylko do fragmentu zawartości, w przeciwieństwie do pseudo-klas, które działają na całą zawartość (zawartość = treść mieszcząca się między <tag> a </tag>).

Potężnym dodatkiem CSS1 jest kombinator potomka. Pozwala on designerowi stylować elementy zawarte w innym elemencie. By z niego skorzystać wystarczy podać element nadrzędny, spację i element potomny. Jedna uwaga - nie należy mylić tego kombinatora z grupowaniem selektorów (np. h1, h2, h3):

• p q {font-family: Georgia, serif; color: #009;}

Ostyluje element <q> w <p class="klasa">lorem <q>ipsum</q>

Istnieje także możliwość stylowania “wnuków” (dzieci dzieci):

• div * q {css...;}

Selektory CSS2

CSS2 zaoferował uniwersalny selektor (*) pozwalający na stylowanie wszystkich rodziców. Dla przykładu, to:

• *.td {css;}

ostyluje wszystkie znaczniki td wszystkich tabel.

Do CSS2 dodano także możliwość sprawdzania czy dany element zawiera któryś z dopuszczalnych atrybutów i stylowania go inaczej od pozostałych. Na przykład element <img/> w HTML zawiera kilka dopuszczalnych atrybutów, takich jak: src, alt, align czy border.

• img[border] {css;}

Zmieni styl dla img z atrybutem border. Dla żadnego innego.

Dodatkowo możemy także sprawdzić, czy treść zawarta w atrybucie jest oddzielana spacjami i zawiera szukany ciąg.
Np:

• a[title~="kermit"] {css dla kermita żaby;}

Lub, czy dokładnie pasuje do szukanego ciągu

• a[title="żaba"] {css dla żaby;}

CSS2 także rozszerzył wybór pseudo-elementów. Pseudo-elementy ::before i ::after pozwalają na dodawanie zawartości przed i po elemencie. W przypadku kursu na browsehappy Kornel dodał dla developerów tag z TODO, automatycznie dodający słowo “TODO:” przed treścią w divie:

dla <div class="todo">:

• div.todo::before{content: "TODO: \"";}

W CSS2, designerzy mogą także zmieniać styl pierwszego potomka danego elementu. Co więcej, pseudo-elementy można łączyć, tworząc bardziej rozbudowane kombinacje:

• element.klasa:first-child::first-line{css;}

Dodano także kombinator dziecka, do którego osobiście nie mam za wielkiego przekonania, z racji na fakt, że przeciętny, zielony użytkownik nie zrozumie sensu stosowania tego kombinatora. Dla przykładu, jesli chcemy zmienić kolor tekstu w paragrafie, dziecku diva klasy “rodzic” wpiszemy:

• div.rodzic > p {css}

W działaniu jednak nie będzie się to różnić od:

• div.rodzic p {css}

Innym kombinatorem dodanym w CSS2 jest kombinator braci. Stosujemy go gdy chcemy nadać styl sąsiadującym elementom w obrębie innego elementu. Np cytatom i linkom w jednym akapicie.

• a + q {css}