clases en div's anidados

[bouinho]

Hola, tengo dos DIV anidados , y en cada uno de ellos tengo etiquetas h1.
Pretendo que la definición de h1 en el div "padre" sea distinta del div "hijo", por decirlo así.

para ello defino dos clases distintas para h1 y asigno cada clase a cada div.

pero me encuentro con una cosa muy curiosa. Esto funciona si la declaracion de las clases esta en el mismo orden en que luego las asigno en los div. Si le cambio el orden deja de funcionar... raro no?
pongo el codigo para que se entienda:

Código CSS:

.info_tabla h1 {
color: #FFFFFF;
background-color:#000000;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
height:50px;
width:100px;
} 
.datos_tabla h1 {
color: #33CC00;
background-color: #0066CC;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
height:20px;
width:100px;
 
}
 

Código HTML:

<div id="divpagina" class="info_tabla">
 
<h1> de info tabla</h1>
<div class="datos_tabla">
<h1> de datos tabla</h1>
</div> 
</div>
 

tal cual esta aqui funciona correctamente, pero si invierto el orden en la declaracion de las clases deja de funcionar:

Código CSS:

.datos_tabla h1 {
color: #33CC00;
background-color: #0066CC;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
height:20px;
width:100px;
 
}
 
.info_tabla h1 {
color: #FFFFFF;
background-color:#000000;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
height:50px;
width:100px;
}
 

Alguien sabe a que es debido? no debería ser indiferente el orden en que se declara si luego se hace referencia a la clase por el nombre de la misma?

Gracias ....

[Zeromm]

Los archivos css se leen siempre hacia abajo, por lo tanto cualquier elemento situado en la parte inferior del archivo va a sobreescribir otro elemento, aunque se llame igual, situado en la parte superior.

Lo que pasa en tu archivo es que las dos clases llaman al mismo elemento, es decir, al h1 que hay dentro de ".info_tabla". Lo explico:

Si pones en la parte superior del css:
.datos_tabla h1
Lo que sucede es que a todos los h1 que aparezcan dentro de .datos_tabla tengan unos estilos...

Y si luego más abajo en el css pones:
.info_tabla h1
Lo que se le está diciendo es que a todos los h1 que aparezcan dentro de ".info_tabla" tengan unos estilos... es decir, se está llamando a los mismos h1 a los que se llamaban en los westilos de antes, por eso se sobreescriben.

Para que los estilos de la clase ".info_tabla h1" solo afectaran al primer h1 que aparece, tendrias que llamarlos así:
.info_tabla > h1

Con lo que le estarias diciendo que solo aplique estilos al primer h1 que sea hijo de .info_tabla

No se si me expliqué bien xD, si no te intento poner un ejemplo más claro :)

[Rafael]

Trata con esto:

Código CSS:

.datos_tabla > h1 {}
 

Aparte de eso, no te conviene usar más de un h1. Usa los h2 que gustes.

[Zeromm]

Iniciado por Rafael

Trata con esto:

Código CSS:

.datos_tabla > h1 {}
 

Aparte de eso, no te conviene usar más de un h1. Usa los h2 que gustes.

De esa forma, al poner debajo ".info_tabla h1" quedarían sobreescritos los estilos igualmente, porque seguirían apuntando al mismo h1.

Tendria que ponerlo ".info_tabla > h1"

Y lo de no poner más de un h1. Es cierto que en el tipo de código que tiene no estaría muy correcto, pero si usa html5 con la semantica correcta si que se pueden usar varios h1.

[bouinho]

Ok, gracias, funciona correctamente.

No sabía lo del simbolo > .
Pero cuando dices:
Con lo que le estarias diciendo que solo aplique estilos al primer h1 que sea hijo de .info_tabla

te refieres a que solo lo aplica al div que tenga asignada esa clase? o hay mas consideraciones....

Lo de no utilizar mas de un h1 es por algo en particular? por buscadores... o algo asi?

si utilizo h2 no hay problema?

gracias por la pronta respuesta...

[pzin]

Iniciado por Zeromm

De esa forma, al poner debajo ".info_tabla h1" quedarían sobreescritos los estilos igualmente, porque seguirían apuntando al mismo h1.

Tendria que ponerlo ".info_tabla > h1"

La respuesta de Rafael es correcta. El selector > no selecciona "al primer hijo", sino a todos los hijos. Pero sólo a los hijos, ningún otro elemento descendiente.

Para seleccionar a primeros elementos hay que usar :first-of-type o :first-child.

[Zeromm]

Iniciado por pzin

La respuesta de Rafael es correcta. El selector > no selecciona "al primer hijo", sino a todos los hijos. Pero sólo a los hijos, ningún otro elemento descendiente.

Para seleccionar a primeros elementos hay que usar :first-of-type o :first-child.

No es por discutir, pero no es correcta, y aquí puedes comprobarlo.

http://codepen.io/zeromm/pen/qcngv

No funciona, y es lógico, ya que de esta forma solo le dice que el hijo de ".datos_tabla" tenga un estilo... pero luego aplicandole estilos a ".info_tabla h1" le estás dando estilos al mismo h1, por eso se sobreescriben.

Pero en cambio si le indicas, como dije, ".info_tabla > h1", selecciona solo los h1 que sean hijos directos de .info_tabla, que no es el caso del <h1> que está dentro de ".datos_tabla" que no es hijo directo de ".info_tabla". Y así si funciona

http://codepen.io/zeromm/pen/kxbgq

Y en este caso sería totalmente innecesario añadir un ":first-of-type" o ":first-child", que además no son compatibles con ie8 sin librerias externas, ya que con un simple selector ">" que si es compatible con esas versiones queda solucionado.

[Zeromm]

Iniciado por bouinho

Pero cuando dices:
Con lo que le estarias diciendo que solo aplique estilos al primer h1 que sea hijo de .info_tabla

te refieres a que solo lo aplica al div que tenga asignada esa clase? o hay mas consideraciones....

En este caso solo le aplica estilos a los h1 que sean hijos directos de esa clase, a todos sus hijos (antes puse que solo hacia referencia al primero pero no, es a todos sus hijps).

Iniciado por bouinho

Lo de no utilizar mas de un h1 es por algo en particular? por buscadores... o algo asi?

si utilizo h2 no hay problema?

gracias por la pronta respuesta...

En html4 y versiones anteriores, a google no le parecía buena practica usar más de un h1 por cada página, por eso se consideraba erroneo. Pero desde que salió el html5 con sus "sections" y sus "articles", se pueden usar varios h1 sin problema (siempre que estén correctamente puestos a nivel semantico). Pero si vas a usar html4 o inferior Rafael tiene razón, y no debes usar más de un h1

[pzin]

Iniciado por Zeromm

No es por discutir, pero no es correcta, y aquí puedes comprobarlo.

Bueno, no miré lo que pedía, andaba con el móvil. Pero era más que nada por lo de que > sirve para seleccionar el primer hijo.

Y eso de hijos directos en realidad no existe; son hijos o no los son.

Iniciado por Zeromm

Y en este caso sería totalmente innecesario añadir un ":first-of-type" o ":first-child", que además no son compatibles con ie8 sin librerias externas, ya que con un simple selector ">" que si es compatible con esas versiones queda solucionado.

A mi IE8... :poopsmiley:

Edito, mirando bien el problema, la solución de Rafael si que es válida, sólo hay que invertir los selectores:

Código CSS:

.info_tabla h1 {} 
.datos_tabla > h1 {}
 

Que además ese orden también es más lógico, ya que sigue el del HTML.

[Zeromm]

Iniciado por pzin

Y eso de hijos directos en realidad no existe; son hijos o no los son.

Cierto, mezclé el que fueran siempre elementos internos, sin incluir los que están dentro de otros... xD

Iniciado por pzin

A mi IE8... :poopsmiley:

A ti... pero a muchos clientes no, por lo tanto yo prefiero un sistema más optimizado que además es igual o incluso "más sencillo" de codear y que da soporte a navegadores antiguos y a los modernos... que otro que es "más dificil" codear y que no da ese soporte, y que por lo tanto no es tan optimizado.

Iniciado por pzin

Edito, mirando bien el problema, la solución de Rafael si que es válida, sólo hay que invertir los selectores:

Claro, pero la pregunta de bouinho era buscar una solución teniendo un orden concreto en el css... y con el orden que tenía él no funcionaba. Es más, si se pudiera modificar el orden no habría que añadir ni el ">".