CSS level 1

Selektor elementu (tag { styl })

Definiuje styl dla określonego tagu. np

h1 { font-weight: bold; }

W ten sposób można deklarować jeden styl dla wielu tagów, oddzielając je przecinkiem.

h1, h2, h3  { font-weight: bold; }

Selektor klasy (tag.klasa { styl })

Definuje styl dla określonej klasy (atrybut Class języka html). np

input.przycisk { border: 1px solid red }

powyższa deklaracja dotyczy tagu

<input (...) class="przycisk />

Nazwe tagu można pominąć, deklaracja będzie wtedy dotyczyła wszsytkich tagów o takiej klasie.

.wazne { font-weight: bold; }

Deklaracja ta dotyczy np.

Lorem ipsum

Selektor identyfikatora (#identyfikator { styl })

Definicja dla tagu o określonym Id. Jest bardziej ogólna niż ta dla Class, ale w jednym dokumencie id może powtórzyć sie tylko raz.

#pojemnik { width: 100%; }

deklaracja ta moze dotyczyć tagu

Można mieszać też ten selektor z innymi. Np.

#pojemnik .wazne { font-weight: bold; }

dotyczy tagów o klasie "wazne" znajdujących sie wewnątrz tagu o id = "pojemnik".

Selektor potomka (tag tag (...) tag { styl })

Selektor dotyczy tagów znajdujących sie niżej w hierarchii dokumentu.

Ta deklaracja dotyczyć będzie cytatu znajdujący sie wewnątrz nagłówka h1:

h1 q { 
    font-style: none; 
    color: red; 
}

A ten przykład dotyczy odnośnika znajdującego się wewnątrz listy nieuporządkowanej:

ul li a { color: red }

Grupowanie selektorów ( tag, tag, tag {styl})

Grupowanie selektor oznacza po prostu wymienienie wszystkich selektorów, których styl dotyczy:

body, div, p, ul, ol, li { margin: 0px; padding: 0px; }

Powyższy przykład ustala zerowe marginesy dla wymienionych elementów (tą czynność akurat lepiej było zrealizować selektorem ogólnym "*", chyba ze dbamy o to aby strona działała poprawnie w Internet Explorerze 5.5 i starszych).

CSS level 2

Selektor dziecka (tag>tag {styl})

Gdy chcemy nadać inny styl liście uporządkowanej a inny liście nie uporządkowanej, możemy skorzystać z selektora rodzica.

ul>li { color: red; }
ol>li { color: blue; }

Po takiej definicji, tag Li znajdujący sie wewnątrz tagu ul będzie miał tekst koloru czerwonego, a ten znajdujący się w tagu Ol, niebieskiego.

Selektor ten różni sie od selektora potomka tym, że element będący dzieckiem musi znaleźć sie bezpośrednio wewnątrz elementu będącego rodzicem.

Internet Explorer 6 nie obsługuje tego selektora!

Selektor braci (tag + tag { styl })

Pozwala ostylować jeden z sąsiadujących ze sobą elementów (braci).

h1 + h2 { color: red; }

Pokoloruje na czerwono taki nagłówek h2:

Czarny nagłówek h1

Czerwony nagłówek h2

Internet Explorer 6 nie obsługuje tego selektora!

Selektor ogólny (*)

Ten selektor oznacza wszystkie tagi. Używa sie go na przykład do resetowania marginesów w całym dokumencie.

* { margin: 0px; padding: 0px; }

Internet Explorer 5.5 nie obsługuje tego selektora!

Selektory atrybutów

W CSS2 i CSS3 zostały wprowadzone selektory rozróżniające elementy na podstawie atrybutów, jakie posiadają. Daje to spore możliwości ograniczone pomysłowością autora strony. Niektóre rzeczy, które trzeba było wcześniej realizować nadając elementom klasy lub używając języków server-side, można teraz zrealizować za pomocą samego CSS'a.

Niestety Internet Explorer 6 i starsze nie obsługują żadnego z tych selektorów.

Prosty Selektor atrybutu

Odnosi się do elementów zawierających podany atrybut, nie ważne, jaką miałby on wartość. Można go użyć np do oznaczenia obrazków posiadających tekst alternatywny.

img[alt] { border: 3px solid red; }

Atrybut o określonej wartości

Przykładem może być specjalne ostylowanie odnośników prowadzących do strony głównej.

a[href="index.html"] { font-size: 2em; }

Można też przy jego użyciu, bez stosowania dodatkowych klas ostylować różne rodzaje tagu Input.

input[type="text"] { styl dla pola tekstowego }
input[type="checkbox"] { styl dla checkboksa }
input[type="submit"] { styl dla przycisku wysyłającego dane }

Atrybut zawierający wyraz oddzielony od innych spacjami

Ostylowanie skrótów dotyczących jakiegoś języka programowanie:

acronym[title~="Language"] { color: green; }

Taka deklaracja będzie dotyczyła akronimu mającego takie title:

Atrybut zawierający wyraz oddzielony od innych myślnikami

Na przykład taka deklaracja będzie dotyczyła Body w dowolnym języku angielskim tzn en-gb, en-au, en-ca, en-us itd.

body[lang|="en"] { color: blue; }

CSS level 3

Niestety Internet Explorer 6 i starsze nie obsługują żadnego z selektorów CSS 3

Tekstowa zawartość elementu

Element mający w treści dany ciąg znaków. Selektor ten istnieje w specyfikacji CSS3, ale żadna przeglądarka go nie interpretuje.

p:contains("foo") { color: red; }

Element poprzedzony

Podobny do selektora dziecka, z tym ze element nie musi być bezpośrednio poprzedzony przez drugi element.

h1 ~ p { color: red; }

Nagłówek

Ten paragraf będzie pokolorowany na czerwono, ponieważ wcześniej w tym dokumencie pojawił się nagłówek h1, nie ważne ze nie stoi on bezpośrednio przed tym elementem.

Selektory atrybutów

Selektory bazujące na wartościach atrybtów.

Selektor prefiksu

To też jest selektor oparty na atrybucie. Oznacza on element o atrybucie zaczynającym sie od danego ciągu znaków. Pozwala ostylować na przykład odnośniki prowadzące poza naszą witrynę.

a[href^="http://"] { color: red; }

Selektor sufiksu

Podobny do selektora prefiksu, tylko określa, co znajduje się na końcu wartości atrybutu. Może się przydać do ostylowania odnośników do plików o danym rozszerzeniu.

a[href$=".zip"] { font-weight: bold; }

Atrybut zawiera wyraz

To jest coś w rodzaju dzikiej karty, odnosi sie do elementów z atrybutem zawierającym w wartości dany ciąg znaków.

span[title*="oko"]

Ten przykład pasować będzie do spanów o title

ma oko
maroko
około