SElektor potomka a dziecka

pytanie zadane 26 stycznia 2016 w HTML i CSS przez niezalogowany

Czym różni się selektor potomka od selektora dziecka? Którego kiedy używać?

3 odpowiedzi

odpowiedź 26 stycznia 2016 przez Schizohatter Nałogowiec (39,600 p.)

Przykładowa struktura:
<div><p><span></span></p></div>

div span { ... } zadziała.
div > span { ... } nie zadziała.

div p { ... } zadziała
div > p { ... } zadziała

Kolejna przykładowa struktura:
<body><div id="pierwszy"><div id="drugi"></div></div></body> (div w divie)
body div { ... } nada styl dla każdego diva
body > div { ... } nada style tylko dla pierwszego diva
div > div { ... } nada style tylko dla drugiego diva (dosłownie - jakiegoś diva, który znajduje się w innym divie).

Konkluzja:

a) potomek wystarczy że znajduje się w rodzicu - nieważne na jakiej "głębokości" i ilu innych rodziców ma nad sobą.

b) dziecko oznacza element znajdujący się bezpośrednio w rodzicu i nieposiadający innych (bezpośrednich) rodziców niż ten zdefiniowany

komentarz 26 stycznia 2016 przez niezalogowany

A lepiej jest użyć biorąc pierwsza strukturę:

div > p > span

div span

Co jest lepiej widziane?

Bo myślę, że bardziej czytelny jest selektor dziecka.

komentarz 26 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

Chyba nadal nie rozumiesz. div>p>span - styluje wszystkie <span> będące dziećmi <p>, które są dziećmi <div>. div span - styluje wszystkie wystąpienia <span> w <div>.

komentarz 26 stycznia 2016 przez Schizohatter Nałogowiec (39,600 p.)

Selektor dziecka jest bardziej precyzyjny (co potem skutkuje nadpisywaniem [lub nie] stylów), ale nie daje dokładnie takiego samego efektu. Poza tym wymaga podania całej "ścieżki" do elementu.

komentarz 17 kwietnia 2020 przez new103 Nowicjusz (190 p.)

@Schizohatter, Wiem, że temat stary jak świat, ale na pewno jest jak mówisz?

https://codepen.io/new103/pen/bGVpXER

odpowiedź 26 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

http://kodcss.pl/kurs-css/lekcje/dzial-1/poznajemy-selektory-css

Edit: Bardziej szczgółowo:

http://kodcss.pl/kurs-css/selektory/elementy/selektor-potomka

http://kodcss.pl/kurs-css/selektory/elementy/selektor-dziecka

komentarz 26 stycznia 2016 przez niezalogowany

Sam sobie też te strony znalazłem :)

Jednak wciąż nie rozumiem różnicy miedzy tymi selektorami. Powodują one ten sam efekt, jednak zapis jest inny...

komentarz 26 stycznia 2016 przez Czort Nałogowiec (32,500 p.)

Selektor dziecka - tworzymy przynajmniej za pomocą dwóch selektorów, przy czym ten drugi ma być dzieckiem tego pierwszego, to znaczy, że ma znajdować się bezpośrednio w elemencie

Słowo bezpośrednio jest kluczem do zrozumienia tej definicji (dlatego je pogrubiono).