Lubię muzea, ale nie mam
czasu chodzić tam co dzień.

Na szczęście piękne obrazy
mogę znaleźć w Internecie.

Także w Khan Academy,
w sekcji historii sztuki.

Zrobiłam stronę z listami
słynnych obrazów,

z nagłówkiem i listami dla każdego stylu
oraz z linkami do artykułów o obrazach.

Żeby strona była bardziej elegancka,
artystyczna,

Za pomocą reguł CSS zmieniłam
czcionkę nagłówków - „h1” i „h2”.

Podoba mi się „cursive”, ale „fantasy”
będzie lepsza, więc to zmienię.

Och, i tutaj też zmienię,
bo są dwie reguły.

Życzę sobie, żeby wszystkie nagłówki
korzystały z jednej rodziny czcionek.

Nie chcę za każdym razem
zmieniać czcionki w dwóch miejscach.

Jak to rozwiązać?
Z dwu reguł CSS zrobić jedną.

Zastanówcie się chwilę.

Zaproponujecie, by dodać tę samą
klasę do „h1” i „h2”?

To by się udało i mielibyśmy
jedną regułę CSS dla tej klasy.

Utrudnilibyśmy sobie jednak życie,

bo musielibyśmy dodawać tę klasę
do każdego nowego „h1” i „h2”.

Jest lepszy sposób. Pogrupujemy
selektory, używając przecinków.

Dodamy przecinek po „h1”
i napiszemy „h2”.

Możemy skasować drugą regułę,
bo wcieliliśmy ją w pierwszą.

I już! Strona wygląda tak samo.

Teraz mogę eksperymentować z rodziną
czcionek, robiąc zmianę w 1 miejscu.

Zmieniam krój na „cursive”
- i zmieniły się wszystkie nagłówki!

Uważajcie na przecinek. Selektory
oddzielamy przecinkiem, nie spacją.

Spacji używamy do selektorów potomnych,
a to jest coś zupełnie innego.

Grupowanie jest świetne
do eliminowania powtórzeń.

Ale nie grupujcie dwóch selektorów tylko
dlatego, że mają te same właściwości.

Grupujcie je, gdy chcecie, żeby zawsze
miały te same właściwości.

Zwykle dlatego,
że są sobie bliskie znaczeniowo.

Tu selektor dotyczy wszystkich nagłówków,
bo chcę je zrobić w jednym stylu.

Poznacie jeszcze jedno częste
zastosowanie grupowania selektorów.