Selectores Avanzados – Hojas de estilo
CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos. Este tipo de selectores no son soportados por IE6 o sus versiones anteriores.
Selector de hijos
Es parecido al selector descentente (vease aquí) pero muy diferente a su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el signo mayor que (>)
Ejemplo:
p > span { color: red; }
código HTML
<p><span>Inserte Texto aquí </span><p>
<p><a href="#"><span>Inserte otro texto aquí</span></a></p>
El selector p > span se interpreta como cualquier elemento <span> que sea hijo directo de un elemento <p>. Así, la primera línea del código HTML cumple esa condición ya que <span> está escrito después del elemento <p>, a diferencia de la línea 2, que no cumple esa condicion.
Selector adyacente.
Este utiliza el signo + y su sintaxis es la siguiente:
tag1 + tag2 { propiedades }
Para que este cumpla la condición en el código HTML debe de:
- tag1 y tag2 deben ser hermanos, por lo que su elemento padre debe de ser el mismo
- tag2 debe aparecer inmediatamente después del tag1 en el código HTML de la página.
Ejemplo:
h1 + h2 { color: red }
código HTML
<h1>Texto</h1>
<h2>Texto</h2>
<h2>Otro texto </h2>
Los estilos del selector h1 + h2 se aplican al primer elemento <h2> ya que este va después del <h1>, al contrario con el segundo <h2> pues este se escribe después del primer <h2> y no cumple con la condición del selector adyacente.
Tags: CSS, hojas de estilo, html, programacion
