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

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

Selecionado
Está p.some_classlocalizado diretamente dentro do div, portanto, um relacionamento pai-filho é estabelecido entre os dois elementos.
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".}

— 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:

seletor descendente (espaço)
seletor filho (>)
seletor de irmão adjacente (+)
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

— 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