Si estamos dando estilos a nuestras webs con css, posiblemente en algún momento nos habremos percatado de que al dar estilo a una etiqueta, por ejemplo <span> que está dentro de una capa, lista, tabla etc, también se lo estamos dando a las que están dentro de las capas internas. Me explico mejor…
Pongamos el caso de que tenemos una lista (puede ser tabla, capas anidadas o lo que queramos), con la estructura siguiente:
<ul>
<li>
<span>1</span>
<div>texto dentro <span>del div</span></div>
</li>
<li>
<span>2</span>
<div>texto dentro <span>del div</span></div>
</li>
</ul>
En esta porción de código podemos ver que tenemos la lista general, y luego dos líneas li. Cada una de estas líneas tiene el número con una etiqueta span, pero dentro de la misma línea, tenemos un div, que a su vez contiene también un span.
El caso es que si queremos darle estilo a esta lista posiblemente terminemos haciéndolo así:
ul li { padding:10px; }
ul li span { padding:20px; font-weight:bold; }
ul li div { color:#666; }
de esta forma, la línea ul li span, afectará tanto al span que está justo detrás del li, como al que está dentro del div, lo que puede hacer que los estilos que tengamos anidados en niveles inferiores se deterioren y nos muestren mal los estilos.
Para dar estilo css al primer hijo anidado de un tag, ya sea una clase, un tag o una id, debemos hacerlo de la forma siguiente:
ul li { padding:10px; }
ul li > span { padding:20px; font-weight:bold; }
ul li div { color:#666; }
Como puedes ver, hemos insertado el símbolo > justo entre la etiqueta li y span, lo que significa que ese estilo únicamente afectará al span que está inmediatamente después del li, o lo que es lo mismo, que no afectará a los valores que estén en niveles inferiores.
De esta forma fácil y limpia podemos dar estilo a los hijos directos sin desarmar el resto de estilos que tengamos en niveles inferiores.