Por ejemplo:¿Qué significa el selector de CSS ">" (signo más grande)?
div > p.some_class {
/* Some declarations */
}
¿Qué significa exactamente el signo >
?
Por ejemplo:¿Qué significa el selector de CSS ">" (signo más grande)?
div > p.some_class {
/* Some declarations */
}
¿Qué significa exactamente el signo >
?
>
es el child combinator, a veces erróneamente llamado el combinador de descendientes directo.
Eso significa que el selector div > p.some_class
solamente selecciona los párrafos de .some_class
que están anidados directamente dentro de un div
, y no cualquier párrafo que están anidados dentro de más.
Un ejemplo:
<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>
lo que está seleccionado y lo que no lo es:
Seleccionado
Este p.some_class
se encuentra directamente dentro de la div
, por lo tanto, se establece una relación padre-hijo entre ambos elementos.
No seleccionado
Este p.some_class
está contenido por un dentro de la div
, en lugar de la div
sí mismo. Aunque este p.some_class
es un descendiente del div
, no es un niño; es un nieto
En consecuencia, mientras que div > p.some_class
no coincidirá con este elemento, div p.some_class
lo hará, usando el descendant combinator en su lugar.
Muchas personas van más allá de llamarlo "hijo directo" o "niño inmediata", pero eso es completamente innecesario (y muy molesto para mí), porque un elemento secundario es inmediata por definición de todos modos, por lo que significan exactamente lo mismo. No hay tal cosa como un "niño indirecto".
Todas las etiquetas p
con la clase some_class
que son hijos directos de una etiqueta div
.
no niños, niños directos – Imad
que coincide p
elementos con clase some_class
que son directamente bajo un div
.
Como mencionan otros, es un selector para niños. Aquí está el enlace apropiado.
¡Muchas gracias por el enlace! Descubrí también los "Selectores de hermanos adyacentes" allí. –
Encontrará [soporte del navegador] (http://reference.sitepoint.com/css/childselector#compatibilitysection) en Sitepoint. No funciona en IE6 si es importante para tus proyectos, está bien en cualquier otro lugar. Este recurso es especialmente útil para hermanos,: nth-child() etc donde el soporte aún está incompleto – FelipeAls
<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 los hijos directos que son <p>
con .some_class
obtendría el estilo aplicado a ellos.
(selector de niños) se introdujo en css2. div p {} selecciona todos los elementos p decedent de elementos div, mientras que div> p selecciona solo elementos p secundarios, no grand child, great grand child, 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 obtener más información sobre CSS Ce [lectores y su uso, lee mi blog, css selectors y css3 selectors
>
(signo mayor que) es un combinador CSS.
Un combinador es algo que explica la relación entre los selectores.
Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.
Hay cuatro combinadores diferentes en CSS3:
Nota:<
no es válido en CSS selectores
Por ejemplo:
<!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>
de salida:
+1 ¿Se llama realmente un * selector de niños *? Si es así, eso es bastante engañoso. Pensaría que '# algo 'a' sería un selector de niños. – alex
@alex: [sí] (http://www.w3.org/TR/CSS2/selector.html#child-selectors) :) '#something a' podría significar que' a' es un nieto o nieto grandioso^n de '# algo' (no tiene en cuenta la profundidad de anidación). – BoltClock
Bueno, quiero decir que todavía es un niño ... un nieto tal vez: P – alex