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

315

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?

html css css-selectors

— Jeremy
fuente

3

jsfiddle.net/joelpurra/7t5CK

— Joel Purra

519

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.

— Matchu
fuente

8

: primer hijo no es obligatorio, en este caso.

— Eozzy

3

parece que el OP no pregunta tanto por el selector como por qué la regla se aplica a todos los divs secundarios.

— Doug Neiner

Mi interpretación es que obtiene el concepto de herencia CSS, y pensó que el primer hijo tendría el efecto que tiene. Es una redacción bastante poco clara.

— Matchu

3

Ah, las alegrías de ser lo suficientemente mayor como para recordar cuándo el selector de 'descendiente directo' resolvería todos sus problemas, pero no pudo usarlo porque no funcionaba en IE . Entonces se produciría mucha frustración innecesaria.

— Aroth

Se aplica también al primer hijo del primer hijo. Si realmente necesita aplicar los cambios solo en el primer hijo, tenemos que cancelar los cambios en los hijos del niño. Algo como esto:div.section > div:first-child > div { /* Cancel Changes*/}

— Mahdi J.Ansari

51

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
{
}

— Tom Gullen
fuente

44

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.

— Doug Neiner
fuente

6

div.section > div

— eozzy
fuente

6

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.

— ЯegDwight
fuente

Buena idea, desafortunadamente también necesito admitir IE6, y si uso h1, tendré que configurar el tamaño de fuente para heredar de modo que la fuente coincida con la del cuerpo, y ie7 y versiones posteriores no admitan heredar. arg!

— Jeremy

Además, tengo divs secundarios y poner divs secundarios en un h1 rompe las reglas, a pesar de que IE lo procesa, no estoy seguro de lo que hacen otros navegadores

— Jeremy

3

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

— Matt Parkins
fuente