O que significa o selector CSS " > " (maior que o sinal)?
por exemplo:
div > p.some_class {
/* Some declarations */
}
>?
7 answers
> é o combinador de crianças , às vezes erroneamente chamado de combinador descendente direto.1
Isso significa que o selector div > p.some_class só selecciona os parágrafos de .some_class que estão aninhados directamente dentro de a div, e não quaisquer parágrafos que estejam aninhados mais para 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>
Seleccionado
Este {[5] } está localizado directamente dentro do Por isso, uma relação pai-filho é estabelecida entre ambos os elementos.-
Não seleccionado
Este {[5] } está contido por umblockquotedentro dodiv, em vez dodivem si. Embora este seja um descendente dosdiv, não é uma criança, é um neto.Consequentemente, embora
div > p.some_classnão corresponda a este elemento,div p.some_classirá, usando o combinador descendente em vez disso.
1muitos as pessoas vão mais longe para chamá-lo de "criança direta" ou "criança imediata", mas isso é completamente desnecessário (e incrivelmente irritante para mim), porque um elemento criança é imediato por definição de qualquer forma, significam exactamente a mesma coisa. Não existe uma "criança indireta".
> (greater-than sign) é um combinador CSS.
Um combinador é algo que explica a relação entre os selectores.
Um selector de CSS pode conter mais do que um selector simples. Entre os selectores simples, podemos incluir um combinador.
Há quatro combinadores diferentes no CSS3:
- selector descendente (espaço)
- selector de crianças ( > )
- selector de irmãos adjacente ( + )
- geral selector de irmãos (~)
Nota: < não é válido em selectores 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:
Corresponde a p elementos com a classe some_class que são directamente sob a div.
Todas as marcas p com classe some_class que são filhos directos de uma marca div.
<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;
}
Todas as crianças directas que estão <p> com .some_class obteriam o estilo aplicado a eles.
(selector de crianças) foi introduzido no css2. div p{ } seleccione TODOS os elementos p decedentes dos elementos div, enquanto div > p selecciona apenas os elementos p child, não grand child, great grand child on so on.
<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>