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

476

Por exemplo:

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

O que exatamente significa o >sinal?

css css-selectors Misha Moroshko
fonte

Respostas:

673

>é 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 .

1 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".

BoltClock
fonte
2
+1 É realmente chamado de seletor de filhos ? Nesse caso, isso é bastante enganador. Eu pensaria que #something aseria um seletor de crianças.
Alex
2
@alex: yes :) #something apode significar aneto ou bisneto #something(não leva em consideração a profundidade do assentamento).
BoltClock
12
@alex é chamado de combinador filho , o espaço é chamado de combinador descendente
robertc
33
Quando alguém é filho de seus avós, estamos lidando com um exemplo realmente desagradável de incesto. Felizmente, isso é impossível em HTML.
Quentin
8
Não ouço nenhum leigo chamando seus filhos de filhos diretos por uma questão de clareza.
BoltClock
41

> (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.

insira a descrição da imagem aqui

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:

insira a descrição da imagem aqui

Mais informações sobre CSS Combinators

Premraj
fonte
developer.mozilla.org/pt-BR/docs/Learn/CSS/Introduction_to_CSS/…
Lalit Yadav
@premraj Obrigado pela excelente explicação dos seletores de pais e filhos!
YCode 12/02/19
O que significa então quando você recebe algo parecido com o .entry-content > * {"code" }que é seguido por .entry-content {"other code" }? Não .entry-content > *cobre todos os filhos de entry-content?
YCode 12/02/19
14

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

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

Dagg Nabbit
fonte
Muito obrigado pelo link ! Eu descobri também os "seletores de irmãos adjacentes" lá.
Misha Moroshko
Você encontrará suporte para navegador no Sitepoint. Não funciona no IE6 se for importante para seus projetos, OK em qualquer outro lugar. Este recurso é esp. útil para irmãos,: enésimo-criança (etc) onde o suporte está ainda incompleta
FelipeAls
10

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

dan04
fonte
5

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

tschaible
fonte
4
html 
<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>
css 
div > p.some_class{
    color:red;
}

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

suraj rawat
fonte
3

(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

Avinash Malhotra
fonte
0

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.

authentichigh
fonte