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!