Czym się różnią te zapisy?

Question

Czym się różni ten zapis:

.content > img

od tego zapisu:

.content img

?

Answer 1

.content > img Oznacza bezpośredniego potomka (tzn. dziecko). Jeśli będziesz miał kod:

<div class="content">
   <img class="obrazek1">
   <div class="container">
      <img class="obrazek2">
   </div>
</div>

To wpisując w CSS kod .content > img odwołasz się tylko do obrazka z klasą obrazek1, bo tylko ten obrazek jest dzieckiem elementu <div> z klasą content.

Natomiast jeśli użyjesz kodu .content img, to odwołasz się do wszystkich obiektów img, które są potomkami elementu o klasie .content, czyli zarówno do obrazka z klasą obrazek1, jak i do obrazka z klasą obrazek2.

Answer 2

1: wszystkie img, które są jedynie dziećmi .content

2: wszystkie img, które są potomkami .content

http://www.kurshtml.edu.pl/css/selektor_dziecka,elementy.html

http://www.kurshtml.edu.pl/css/selektor_potomka,elementy.html