Selectores de Hijos en CSS3
Los selectores de hijos, casi como indica su nombre, permite seleccionar un elemento que es hijo de otro, para aplicarle los estilos que decidamos.
Ser hijo de otro elemento significa que pertenece a la estructura de otro elemento. Por ejemplo, una palabra que pertenece a un párrafo concreto se dice que es hija de ese párrafo. Una imagen dentro de una celda de una tabla, sería hija de esa tabla. Un enlace dentro de una capa llamada "enlaces" sería hijo de esa capa.
Imagina por ejemplo el siguiente fragmento de código Html:
<h2>Menú Navegación</h2>
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<ul>
<li>Subección A</li>
<li>Subección B</li>
<li>Subección C</li>
</ul>
<li>Sección 3</li>
<li>Sección 4</li>
<li>Sección 5</li>
<li>Sección 6</li>
</ul>
</nav>
Si quisieramos aplicarle un estilo a los enlaces de las subsecciones A, B y C, tendríamos que colocarle por ejemplo un class="clasedeestilo" a cada una de ellas y luego definir el estilo en la hoja de estilo, cierto? Pues ahora, con este nuevo invento de los elementos hijo, para seleccionar esos tres elementos nos bastaría con escribir los estilos al siguiente Selector:
ul > ul > li {estilos definidos}Con eso estamos indicando al navegador que los estilos escritos dentro de los corchetes son para todos los elementos li que pertenecen a una lista desordenada que a su vez pertenece a ora. Esto son, las tres subsecciones A, B y C, claro.
Fíjate que los selectores de hijos son distintos a los selectores de descendentes! Cuál es la diferencia? Que mientras que con selectores de descendentes se seleccionan TODOS los elementos del tipo elegido contenidos en otro elemento mayor, con los selectores de hijos solo se seleccionan los de la generación siguiente, es decir, solo hijos y no nietos ni bisnietos!
Con un ejemplo lo vemos más claro. Si en la hoja de estilo pusieramos esta línea:
estaríamos colocando un color de fondo rojo a todos los li que existen dentro de cualquier ul. En cambio, si usamos selectores de hijos como con esta otra línea:
lo que conseguimos es colorear solamente los que son hijos directos, los li de las secciones, pero no los de las subsecciones A, B y C, pues esos son ya nietos, no hijos.
:
