Wybieraki potomkowe CSS
- Poprzednia strona Wybieraki potomkowe CSS
- Następna strona Wybieraki siostrzeńce CSS
W porównaniu do selektorów potomków, selektory potomków (Child selectors) mogą wybrać tylko elementy będące potomkami określonego elementu.
Wybór potomka
Jeśli nie chcesz wybrać dowolnych potomków, ale chcesz ograniczyć zakres do potomków określonego elementu, użyj selektora potomka (Child selector).
Na przykład, jeśli chcesz wybrać tylko elementy <strong>strong</strong> jako potomków elementu <h1>, możesz to napisać w ten sposób:
h1 > strong {color:red;}
Ta reguła zmieni dwa elementy <strong>strong</strong> pod pierwszym <h1> na czerwony, ale element <strong>strong</strong> pod drugim <h1> pozostanie bez zmian:
<h1>To jest <strong>bardzo</strong> <strong>bardzo</strong> ważne.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
Wyjaśnienie gramatyczne
Powinienes być już świadomy, że wybieraki potomkowe używają znaku > (złącznik dziecka).
Mogą być spacery między znakami boku złącznika dziecka, są one opcjonalne. Dlatego poniższe zapisy są poprawne:
h1 > strong h1> strong h1 >strong h1>strong
Jeśli czytać od prawej do lewej, wybierak h1 > strong można interpretować jako 'wybierz wszystkie elementy strong, które są dziećmi elementu h1'.
Łączenie wybieraków potomkowych i wybieraków potomkowych
Zobacz poniższy wybierak:
table.company td > p
Powyższy wybierak wybiera wszystkie elementy p, które są dziećmi elementu td, ten element td dziedziczy z elementu table, który ma atrybut class zawierający 'company'.
- Poprzednia strona Wybieraki potomkowe CSS
- Następna strona Wybieraki siostrzeńce CSS
