html - selectores - selector padre css

¿Hay un selector CSS para el primer hijo directo solamente?

Question

Tengo el siguiente html

<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>

Y el siguiente estilo:

DIV.section DIV:first-child
{
...
}

Por alguna razón, no entiendo que el estilo se aplique a los "sub contenidos 1" <div> así como al "encabezado" <div> .

Pensé que el selector en el estilo solo se aplicaría al primer hijo directo de un div con una clase llamada "sección". ¿Cómo puedo cambiar el selector para obtener lo que quiero?

Answer 1

CSS se llama hojas de estilo en cascada porque las reglas se heredan. Usando el siguiente selector, seleccionará solo el hijo directo del padre, pero sus reglas serán heredadas por los divs hijos de los divs :

div.section > div { color: red }

Ahora, tanto la div como sus hijos serán red . Debe cancelar lo que haya establecido en el padre si no desea que se herede:

div.section > div { color: red }
div.section > div div { color: black }

Ahora solo ese div individual que es un hijo directo de div.section será rojo, pero sus divs seguirán siendo negros.

Answer 2

Encontré esta pregunta buscando en Google. Esto devolverá el primer elemento secundario de un elemento con el container clase, independientemente del tipo de elemento que sea.

.container > *:first-child
{
}

Answer 3

Lo que publicaste literalmente significa "Encuentra cualquier divs que esté dentro de la sección divs y que sea el primer hijo de sus padres". El sub contiene una etiqueta que coincide con esa descripción.

No me queda claro si quiere tener a los dos hijos de la división principal o no. Si es así, usa esto:

div.section > div

Si solo quieres el encabezado, usa esto:

div.section > div:first-child

Usando > cambia la descripción a: "Encuentra cualquier divs que sean descendientes directos de divs de sección" que es lo que quieres.

Tenga en cuenta que todos los principales navegadores admiten este método, excepto IE6. Si el soporte de IE6 es de misión crítica, tendrá que agregar clases a los divs secundarios y usar eso, en su lugar. De lo contrario, no vale la pena preocuparse.

Answer 4

Utilice div.section > div .

Mejor aún, use una etiqueta <h1> para el encabezado y la div.section h1 en su CSS, para admitir navegadores más antiguos (que no conocen el > ) y mantenga su marca semántica.

Answer 5

div.section > div