Qual é a diferença entre> e espaço no seletor css [duplicado] - css

Eu já vi dois exemplos,

.someclass> .inner {...}

e

.someclass .inner {...}

funciona da mesma maneira. Existe alguma diferença entre eles que eu não estou vendo?

Respostas:

O primeiro se aplica apenas a imediato crianças. O segundo, para qualquer descendente.

Então, considerando este CSS:

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

o seguinte se aplica:

<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{...} - só se aplica a ".inner" que são filhos diretos de ".someclass".

.someclass .inner{...} - aplica-se a qualquer ".inner" que esteja dentro de ".someclass", mesmo se houver elementos entre eles.