Los selectores designan los elementos HTML sobre los cuales van a aplicarse un estilo CSS determinado. Los selectores conjuntamente con los estilos conforman lo conocido como las reglas CSS.
En este artículo nos interesa los selectores jerárquicos y son los que se refieren no al elemento padre sino a algún o algunos de los elementos de los que tienen algún parentesco como descendiente, hijos , hermano adyacente.
Selectores para descendientes
1) A B | De esta forma se selecciona cualquier elemento B que es descendiente del elemento A.
2) A > B | Con el signo mayor que designamos que se seleccione cualquier elemento B que es hijo directo del elemento A.
3) A + B | Con el signo + se selecciona cualquier elemento B precedido inmediatamente del elemento A.
Parte html para estudiar los distintos ejemplos.
<div id="division">
<h1> h1-1 hijo directo</h1>
<div id="contenido">
<h1> h1 hijo de hijo directo</h1>
<p>Párrafo 1</p>
</div>
<h1>h1-2 hijo directo</h1>
</div>
<h1>h1 hermano adyacente</h1>
Ejemplo, Tipo 1:
#division h1 : Selecciona los h1 descendientes de id división, estos son: Titulo 1, Título 1 bis y Título 2. Dicho de otra forma son todos los h1 dentro de la etiqueta <div> identificada como #división.
#division h1 {
width: 300px;
background-color: #9cf;
}
h1 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
#contenido {
padding-left: 20px;
}
Ejemplo, Tipo 2:
#division > h1 : Selecciona las etiquetas h1 que sean hijos directo de #division. En este caso se refieren a Titulo 1 y Titulo 2, quedando fuera Titulo 1 bis.
#division > h1 {
width: 300px;
background-color: #9cf;
}
... resto igual al ejemplo anterior.
Ejemplo, Tipo 3:
#division + h1 : Cualquier elemento h1 que sea hermano en jerarquía y que sea inmediatamente posterior. La selección se refiere a ‘h1 hermano adyacente inmediato ‘.
#division + h1 {
width: 300px;
background-color: #9cf;
}
... resto igual al primer ejemplo.
Ver ejemplo en codepen.
