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!