0:00:00.809,0:00:05.432
Z pączków przerzućmy się na marchewkę,[br]jeden z najzdrowszych produktów.

0:00:05.432,0:00:07.901
I przysmak królików.

0:00:07.901,0:00:10.534
Wiecie, że marchewki[br]są nie tylko pomarańczowe?

0:00:10.534,0:00:13.535
Dawniej były fioletowe.[br]Wciąż takie istnieją.

0:00:13.535,0:00:19.541
Mamy tu stronę z listą kolorów[br]i zdaniem o fioletowych początkach.

0:00:19.541,0:00:25.267
Zastosowaliśmy klasy, by przedstawić[br]nazwy w odpowiednich kolorach.

0:00:25.267,0:00:31.905
Podoba mi się to w liście, ale nie wiem,[br]jak fiolet sprawdzi się w tekście.

0:00:31.905,0:00:36.215
Zrezygnuję z kolorowego tła[br]i wybiorę subtelniejsze odcienie.

0:00:36.215,0:00:43.778
Jak powiedzieć przeglądarce, by fiolet[br]tutaj wyglądał inaczej niż tutaj?

0:00:43.778,0:00:49.300
Nie nazwą klasy, bo jest taka sama.[br]Trzeba by wprowadzić nową.

0:00:49.300,0:00:52.919
Znacznik też jest ten sam: „strong”.

0:00:52.919,0:00:58.013
Nie użyjemy selektora typu[br]„element plus nazwa klasy”.

0:00:58.013,0:01:00.663
Czy jest tu jakaś inna różnica?

0:01:00.663,0:01:06.376
To jest „strong” wewnątrz „li”,

0:01:06.376,0:01:10.985
a ten „strong” siedzi w „p”.

0:01:10.985,0:01:15.583
Różnica tkwi[br]w znacznikach-rodzicach. Powyżej.

0:01:15.583,0:01:21.102
Skorzystamy z tego, by zrobić regułę CSS[br]z użyciem tzw. selektorów potomnych.

0:01:21.102,0:01:25.216
To sposób wyboru elementów[br]na podstawie pozycji w dokumencie.

0:01:25.216,0:01:30.624
Żeby wybrać tylko fioletowy[br]„strong” w akapicie,

0:01:30.624,0:01:35.776
napiszemy „p”, a potem spację[br](jest bardzo ważna!)

0:01:35.776,0:01:40.381
i nazwę klasy: „.purple”.

0:01:40.381,0:01:46.112
Dodamy właściwości,[br]które złagodzą kolorystykę.

0:01:46.112,0:01:50.311
Kolor tła - przezroczyste.[br]To anuluje poprzednie ustawienia.

0:01:50.311,0:01:58.802
Dobrze: zmieniliśmy ten fiolet, nie[br]zmieniając reszty fioletowego tekstu.

0:01:58.802,0:02:02.879
Zawsze, gdy użyjemy klasy „fiolet”[br]w takim akapicie,

0:02:02.879,0:02:05.324
pojawi się styl zastosowany później.

0:02:05.324,0:02:09.588
Pomajstrujmy jeszcze[br]przy naszym dokumencie.

0:02:09.588,0:02:15.728
Chcemy nadać jakiś styl[br]tylko znacznikom „strong” w „li”.

0:02:15.728,0:02:23.143
Najpierw znacznik-rodzic: „li”,[br]potem spacja i „strong”.

0:02:23.143,0:02:28.066
Zmienimy interlinię,[br]porozsuwamy tekst bardziej.

0:02:28.066,0:02:34.073
Ładnie. Jeśli chcemy, możemy nawet[br]dodać „ul” przed „li”,

0:02:34.073,0:02:38.525
aby mieć pewność, że nie zadziała[br]na „strong” w „ol” wewnątrz „li”.

0:02:38.525,0:02:43.807
Aby używać selektorów potomnych, musicie[br]dobrze poznać strukturę dokumentu:

0:02:43.807,0:02:46.102
które znaczniki[br]znajdują się w których.

0:02:46.102,0:02:49.512
Jeśli robicie wcięcia, będzie łatwo,

0:02:49.512,0:02:52.508
bo wcięcia odzwierciedlają[br]hierarchię znaczników.

0:02:52.508,0:02:56.955
Mamy „ul”, wewnątrz jest „li”,

0:02:56.955,0:02:59.341
a jeszcze głębiej: „strong”.

0:02:59.341,0:03:02.926
Jeśli nie dbaliście o wcięcia,[br]poprawcie to,

0:03:02.926,0:03:07.024
żeby było wam łatwiej[br]zrozumieć strukturę strony

0:03:07.024,0:03:10.609
i na tej podstawie[br]zastosować selektory CSS.

0:03:10.609,0:03:13.598
Można używać[br]bardzo różnych selektorów.

0:03:13.598,0:03:19.021
Np. aby wyszukiwać dany typ znacznika[br]w elemencie o pewnym ID,

0:03:19.021,0:03:22.463
albo dane ID w elementach[br]należących do pewnej klasy.

0:03:22.463,0:03:25.333
Każda kombinacja,[br]której potrzebujecie.

0:03:25.333,0:03:32.230
Pamiętajcie: po zmianie struktury strony[br]mogą nie działać stare reguły CSS.

0:03:32.230,0:03:37.185
Stosujcie je rozważnie,[br]myśląc o przyszłości.

0:03:37.185,0:03:41.300
Aby uniezależnić się od struktury[br]strony, używajcie klas.

0:03:41.300,0:03:45.612
Wróćmy do reguł, które określiłam.[br]Przemyślmy je.

0:03:45.612,0:03:51.383
Pierwsza nadaje styl wszystkim[br]fioletowym elementom w akapitach.

0:03:51.383,0:03:57.589
Czy nowe akapity z fioletowymi[br]elementami też mają mieć tę właściwość?

0:03:57.589,0:04:02.371
Tak, bo myślę, że zawsze[br]będzie wyglądało to dobrze.

0:04:02.371,0:04:04.401
Potrzebuję precyzyjniejszej reguły?

0:04:04.401,0:04:11.186
Gdyby akapity zawsze należały do elementu[br]z klasy „article", mogłabym to dodać.

0:04:11.186,0:04:14.249
Na razie precyzyjniej się nie da.

0:04:14.249,0:04:21.178
Druga reguła daje elementom „strong”[br]w listach określoną interlinię.

0:04:21.178,0:04:26.039
Czy te elementy w „li”[br]zawsze mają być tak luźno?

0:04:26.039,0:04:30.978
Może nie. Ta reguła[br]chyba jest zbyt ogólna.

0:04:30.978,0:04:36.778
Nie jestem pewna,[br]więc dodam klasę do tego „ul”

0:04:36.778,0:04:42.032
i zmienię to w „ul.spacey”,

0:04:42.032,0:04:44.652
żeby ograniczyć zasięg reguły.

0:04:44.652,0:04:49.840
Rozwijając swoją stronę, będę mogła[br]uogólniać lub precyzować reguły.

0:04:49.840,0:04:53.619
Zyskaliście kolejne narzędzie w CSS!

0:04:53.619,0:04:57.879
Poćwiczcie, by móc używać go,[br]gdy będzie to potrzebne!