O que significa o seletor CSS ">" (sinal com mais que o sinal)?

Por exemplo:

div > p.some_class {
  /* Some declarations */
}

O que exatamente significa o >sinal?

>é o combinador filho , às vezes chamado erroneamente de combinador descendente direto. ^{1 1}

Isso significa que o seletor div > p.some_classseleciona apenas parágrafos .some_classaninhados diretamente dentro de a dive não parágrafos aninhados mais dentro.

Uma ilustração:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

O que é selecionado e o que não é:

1. Selecionado
   Está p.some_classlocalizado diretamente dentro do div, portanto, um relacionamento pai-filho é estabelecido entre os dois elementos.

2. Não seleccionado
   Esta p.some_classé contido por um blockquotedentro do div, e não o divpróprio. Embora este p.some_classseja um descendente do div, não é uma criança; é um neto.

   Conseqüentemente, embora div > p.some_classnão corresponda a esse elemento, div p.some_classserá, usando o combinador descendente .

¹ _{Muitas pessoas vão mais longe e chamam de "filho direto" ou "filho imediato", mas isso é completamente desnecessário (e incrivelmente irritante para mim), porque um elemento filho é imediato por definição de qualquer maneira, então significa exatamente a mesma coisa. Não existe "filho indireto".}

> (sinal maior que) é um combinador de CSS.

Um combinador é algo que explica o relacionamento entre os seletores.

Um seletor de CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.

Existem quatro combinadores diferentes no CSS3:

1. seletor descendente (espaço)
2. seletor filho (>)
3. seletor de irmão adjacente (+)
4. seletor geral de irmãos (~)

Nota: < não é válido nos seletores de CSS.

Por exemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Resultado:

Mais informações sobre CSS Combinators

Como outros mencionam, é um seletor de filhos. Aqui está o link apropriado.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Ele combina pelementos com a classe some_classque está diretamente sob a div.

Todas as ptags com classe some_classque são filhos diretos de uma divtag.

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

div > p.some_class{
    color:red;
}

Todos os filhos diretos <p>com .some_classeles receberiam o estilo aplicado a eles.

(seletor filho) foi introduzido no css2. div p {} seleciona todos os elementos p decedentes dos elementos div, enquanto div> p seleciona apenas filho p elementos, não neto, bisneto, etc.

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

Para obter mais informações sobre CSS Ce [lectors e seu uso, consulte meu blog, css selectors e css3 selectors

O seletor de sinal maior (>) no CSS significa que o seletor à direita é um descendente / filho direto do que estiver à esquerda.

Um exemplo:

article > p { }

Significa apenas estilizar um parágrafo que vem depois de um artigo.