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



2 Answers

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.

html css css-selectors

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?




div.section > div



Related