Wracamy do strony o pączkach
i ryzyku z nimi związanym.
Podoba mi się klasa „ostrzeżenie”
(ang. warning) dodana do „p” i „strong”.
To ostrzeżenie ma się wyróżniać
jeszcze bardziej.
Ma szarą krawędź,
od reguły klasy „fact”.
Lepiej wyglądałoby z grubym,
pomarańczowym obramowaniem.
Spróbujmy to dodać
do reguły „ostrzeżenie”.
Krawędź, 5 pikseli,
gładka, pomarańczowa.
Świetnie. Ale dotyczy też
znaczników „strong”,
a to nie wygląda dobrze
obok tego tekstu.
Ma być tylko w akapicie
„ostrzeżenie”.
A nie w tekście
śródliniowym, jak ten.
Jak zrobić bardziej
konkretną regułę CSS?
Można zrobić nową klasę:
„akapit-ostrzeżenie”.
I przenieść właściwości.
Tego nie zrobimy.
Każemy przeglądarce dawać krawędzie
tylko akapitom z ostrzeżeniem.
Ale nie innym znacznikom w tej klasie.
Najpierw zapiszmy
szukany element „p”,
potem kropkę i nazwę klasy:
„ostrzeżenie”.
Przeglądarka wyszuka wszystkie
znaczniki „p” z klasy „ostrzeżenie”
i wewnątrz damy właściwości.
Wklejmy właściwość krawędzi...
I już! Mamy krawędź tylko przy fakcie,
a nie przy znaczniku „strong”.
Można tak robić z dowolną
kombinacją elementów i nazw klas,
gdy chcemy, by przeglądarka nadała
styl tylko znacznikom mającym klasę.
Pamiętajcie o kolejności:
nazwa znacznika, kropka
i nazwa klasy.
Jeśli między nazwą a kropką
znajdzie się spacja, nic z tego.
Bo spacja w CSS ma inne znaczenie.
Przeglądarka zinterpretuje
tę regułę inaczej.
Oglądajcie dalej. W nastepnej części
będzie więcej o specjalnej spacji!