CSS descendant selectors

{'type': u'plain'}

Z pączków przerzućmy się na marchewkę,
jeden z najzdrowszych produktów.

I przysmak królików.

Wiecie, że marchewki
są nie tylko pomarańczowe?

Dawniej były fioletowe.
Wciąż takie istnieją.

Mamy tu stronę z listą kolorów
i zdaniem o fioletowych początkach.

Zastosowaliśmy klasy, by przedstawić
nazwy w odpowiednich kolorach.

Podoba mi się to w liście, ale nie wiem,
jak fiolet sprawdzi się w tekście.

Zrezygnuję z kolorowego tła
i wybiorę subtelniejsze odcienie.

Jak powiedzieć przeglądarce, by fiolet
tutaj wyglądał inaczej niż tutaj?

Nie nazwą klasy, bo jest taka sama.
Trzeba by wprowadzić nową.

Znacznik też jest ten sam: „strong”.

Nie użyjemy selektora typu
„element plus nazwa klasy”.

Czy jest tu jakaś inna różnica?

To jest „strong” wewnątrz „li”,

a ten „strong” siedzi w „p”.

Różnica tkwi
w znacznikach-rodzicach. Powyżej.

Skorzystamy z tego, by zrobić regułę CSS
z użyciem tzw. selektorów potomnych.

To sposób wyboru elementów
na podstawie pozycji w dokumencie.

Żeby wybrać tylko fioletowy
„strong” w akapicie,

napiszemy „p”, a potem spację
(jest bardzo ważna!)

i nazwę klasy: „.purple”.

Dodamy właściwości,
które złagodzą kolorystykę.

Kolor tła - przezroczyste.
To anuluje poprzednie ustawienia.

Dobrze: zmieniliśmy ten fiolet, nie
zmieniając reszty fioletowego tekstu.

Zawsze, gdy użyjemy klasy „fiolet”
w takim akapicie,

pojawi się styl zastosowany później.

Pomajstrujmy jeszcze
przy naszym dokumencie.

Chcemy nadać jakiś styl
tylko znacznikom „strong” w „li”.

Najpierw znacznik-rodzic: „li”,
potem spacja i „strong”.

Zmienimy interlinię,
porozsuwamy tekst bardziej.

Ładnie. Jeśli chcemy, możemy nawet
dodać „ul” przed „li”,

aby mieć pewność, że nie zadziała
na „strong” w „ol” wewnątrz „li”.

Aby używać selektorów potomnych, musicie
dobrze poznać strukturę dokumentu:

które znaczniki
znajdują się w których.

Jeśli robicie wcięcia, będzie łatwo,

bo wcięcia odzwierciedlają
hierarchię znaczników.

Mamy „ul”, wewnątrz jest „li”,

a jeszcze głębiej: „strong”.

Jeśli nie dbaliście o wcięcia,
poprawcie to,

żeby było wam łatwiej
zrozumieć strukturę strony

i na tej podstawie
zastosować selektory CSS.

Można używać
bardzo różnych selektorów.

Np. aby wyszukiwać dany typ znacznika
w elemencie o pewnym ID,

albo dane ID w elementach
należących do pewnej klasy.

Każda kombinacja,
której potrzebujecie.

Pamiętajcie: po zmianie struktury strony
mogą nie działać stare reguły CSS.

Stosujcie je rozważnie,
myśląc o przyszłości.

Aby uniezależnić się od struktury
strony, używajcie klas.

Wróćmy do reguł, które określiłam.
Przemyślmy je.

Pierwsza nadaje styl wszystkim
fioletowym elementom w akapitach.

Czy nowe akapity z fioletowymi
elementami też mają mieć tę właściwość?

Tak, bo myślę, że zawsze
będzie wyglądało to dobrze.

Potrzebuję precyzyjniejszej reguły?

Gdyby akapity zawsze należały do elementu
z klasy „article", mogłabym to dodać.

Na razie precyzyjniej się nie da.

Druga reguła daje elementom „strong”
w listach określoną interlinię.

Czy te elementy w „li”
zawsze mają być tak luźno?

Może nie. Ta reguła
chyba jest zbyt ogólna.

Nie jestem pewna,
więc dodam klasę do tego „ul”

i zmienię to w „ul.spacey”,

żeby ograniczyć zasięg reguły.

Rozwijając swoją stronę, będę mogła
uogólniać lub precyzować reguły.

Zyskaliście kolejne narzędzie w CSS!

Poćwiczcie, by móc używać go,
gdy będzie to potrzebne!