Jaka jest różnica między> i spacja w selektorze css [duplicate] - css

Widziałem dwa przykłady

.someclass> .inner {...}

i

.someclass .inner {...}

działa w ten sam sposób. Czy są między nimi jakieś różnice, których nie widzę?

Odpowiedzi:

Pierwszy dotyczy tylko natychmiastowy dzieci. Drugi, do każdego potomka.

Więc biorąc pod uwagę ten CSS:

.someclass > .inner { color: red }
.someclass .inner { font-weight: bold }

obowiązuje:

<div class="someclass">
<div class="inner">
Bold and red
</div>

<div>
<div class="inner">
Just bold.
</div>
</div>
</div>

.someclass>.inner {
color: red
}

.someclass .inner {
font-weight: bold
}

<div class="someclass">
<div class="inner">
Bold and red
</div>

<div>
<div class="inner">
Just bold.
</div>
</div>
</div>

.someclass > .inner{...} - dotyczy tylko „.inner”, które kierują dzieci do „.someclass”.

.someclass .inner{...} - dotyczy każdego „.innera”, który znajduje się w „.someclass”, nawet jeśli istnieją między nimi elementy.