Grupowanie selektorów

Grupowanie selektorów

Na początek prosty przykład arkusza stylów, określającego kolor dla nagłówków i akapitów.

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Dzięki temu, że selektory można dowolnie grupować, jeśli pewne wartości mają obowiązywać dla każdego z nich, powyższy zapis można znacznie uprościć — poszczególne selektory wchodzące w skład grupy rozdzielamy przecinkami. Poniżej przedstawiono przykład zgrupowanych selektorów hl, h2 oraz p.

h1, h2, p
{
color:green;
}

Styl powyższego przykładu spowoduje nadanie koloru zielonego wszystkim nagłówkom stopnia pierwszego i drugiego oraz blokom tekstu. Oczywiście nic nie stoi na przeszkodzie, by dodać tu kolejne style, np. bloku tekstu, określające wysokość czcionki jako 15 punktów.

h1, h2, p
{
color:red;
}
p
{
font-size:15pt;
}

Taka definicja stylów użyje koloru czerwonego do formatowania zgrupowanych elementów oraz czcionki o wysokości 15 punktów w każdym bloku tekstu.