En qué se diferencian?

[sergi_multimedia]

Hola, veo en algunas páginas web que cuando llamas a las etiquetas o elementos en tu hoja de estilos lo hacen de dos maneras y no sé si son dos maneras con el mismo resultado o existen diferencias.

Por ejemplo:

Código CSS:

.modulo > h2 {.....}
 
.modulo h2 {......}
 

Hay diferencias?

[pupefo]

Hola!!

Creo que se diferencian en el orden en que aparecen, es decir:

Por ejemplo: <h1><p> PRUEBA </p></h1>

<p><h1> PRUEBA </h1></p>


utilizando ">" indicas que si aparece antes que la otra etiqueta cogerá un código css u otro.


Me he explicado bastante mal pero espero haberte ayudado!!!

Explicación

[pzin]

El primero sólo funcionará para los h2 hijos directos de .modulo, mientras que el segundo lo hará para cualquier h2 que esté dentro de .modulo.

Si tienes eso así:

Código CSS:

.modulo h2 {
  color: red;
}
.modulo > h2 {
  color: blue;
}
 

Y este HTML:

Código HTML:

<div class="modulo">
  <h2>Este saldrá azul</h2>
  <div><h2>Este rojo ya que no es hijo directo</h2></div>
  <h2>Y este azul también ya que sigue siendo hijo directo</h2>
</div>
 

Luego está "ia", que es un diptongo, entonces "di-fe-ren-cian" no es esdrújula, si no llana y no se acentúa ya que no acaba ni en vocal, ni ene ni ese.

[Rafael]

Pzin. He dibujado una sonrisa, con el concepto hijo directo

El término, creo un poco más adecuado es descendiente directo, o sea hijo.

Un descendiente no directo sería algo así como nieto, bisnieto, tatara-tatara-tatara nieto.

Por lo tanto, en mi coloquial explicación .modulo > h2 aplica solo para los hijos, no para los nietos o anexas, a diferencia del primero.

[Rafael]

Pupefo. Habrás notado que no es en cuanto al órden que mencionas.

Por ejemplo: <h1><p> PRUEBA </p></h1>
<p><h1> PRUEBA </h1></p>

De echo tu ejemplo es anidación, o jerarquía. (que en realidad sí es cierto tipo de órden)
h1 p para tu primer ejemplo
p h1 para el segundo.

En la web que mencionas hay otros tipos de relaciones que son muy interesantes, y nos sirven, además de los ejemplos que ponen ahí, para dar formato a columnas en tablas entre otras cosas.

[pzin]

Si, ahora que lo pienso "hijo directo" es un tanto redundante. Tiene su aquello lo "opuesto"; hijo indirecto

Descendiente directo o hijo a secas son las expresiones correctas.

[sergi_multimedia]

Muchas gracias a todos por vuestras explicaciones, me ha quedado muy claro el concepto.

Saludos!