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

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 que no entiendo, el estilo se está aplicando al "sub contenido 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?

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

No me queda claro si quieres o no a los dos hijos del div principal. Si es así, use esto:

div.section > div

Si solo desea el encabezado, use esto:

div.section > div:first-child

El uso de la >descripción cambia 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 usarlo en su lugar. De lo contrario, no vale la pena preocuparse.

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

.container > *:first-child
{
}

CSS se llama hojas de estilo en cascada porque las reglas se heredan. Utilizando el siguiente selector, se selecciona sólo el niño directa de los padres, pero sus reglas serán heredados por que los divniños 's divs:

div.section > div { color: red }

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

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

Ahora solo ese single del divque es hijo directo div.sectionserá rojo, pero sus hijos divsseguirán siendo negros.

div.section > div

Uso div.section > div.

Mejor aún, use una <h1>etiqueta para el encabezado y div.section h1en su CSS, a fin de admitir navegadores más antiguos (que no saben sobre el >) y mantener su marcado semántico.

El selector CSS para el primer hijo directo en su caso es:

.section > :first-child

El selector directo es> y el primer selector hijo es: primer hijo

No es necesario un asterisco antes del: como sugieren otros. Puede acelerar la búsqueda de DOM modificando esta solución anteponiendo la etiqueta:

div.section > :first-child