Para indicar sobre qué valores se aplican los estilos CSS3 hay que usar selectores. Estos selectores indicarán dónde se aplicarán los estilos CSS. Las reglas CSS están compuesta por selectores y los estilos siendo estos últimos los pares propiedad – valor que dan formato a nuestras páginas.
Entre los tipos de selectores podemos encontrarnos de tipo, de clase, de identificación y jerárquicos. Son estos últimos los que ahora nos interesa abordar. Existen tres clases entre los selectores jerárquicos: Descendientes, Hijos y Hermano adyacente.
Selectores jerárquicos descendientes
Hablamos de selectores jerárquicos descendientes cuando queremos seleccionar cualquier elemento B que es descendiente del elemento A. Notación => A B.
<!DOCTYPE html>
<html lang="es">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Selectores jerárquicos - Altruistas CSS3</title>
</head>
<style type="text/css">
#division h1 {
width: 200px;
background-color:#9cf
}
h1 {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<body>
<div id="division">
<h1>Título 1</h1>
<div id="contenido"style="padding-left: 20px">
<h1>Título 1 bis</h1>
<p>Párrafo 1</p>
</div>
<h1>Título 2</h1>
</div>
</body>
</html>
Puedes ejecutar el código en este enlace. Observando este ejemplo observamos en el selector ‘#division h1’ a este tipo al que nos hemos referido. Significa las etiquetas <h1> que son descendientes del selector de identificación ‘#division’. Cumplen este requisito todos no solo los hijos sino también los nietos. Es decir, son hijos: Título 1 y Titulo 2 y es nieto Título 1 bis.
Selectores jerárquicos hijos
Con estos selectores nos estamos refiriendo a cualquier elemento B que es hijo directo del elemento A. Notación =>A>B
Se aplica el mismo ejemplo anterior solo que se modifica la línea: #division h1 por #division>h1
Puedes ver el resultado en este enlace.
Se puede comprobar que solo se refiere a los hijos y estos son las etiquetas <h1> que cuelgan directamente del selector de identificación ‘#division’, es decir Título 1 y Título 2. Ya no tiene en cuenta los hijos de sus hijos.
Selectores jerárquicos hermanos adyacente
Hacen referencia al elemento B que es posterior en la secuencia a un elemento A. Notación => A+B.
Estudiamos el siguiente ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Hermano adyacente - Altruistas CSS3-HTML5</title>
</head>
<style>
li.uno+li {
width: 200px;
background-color: #9cf;
}
</style>
<body>
<ul>
<li class="uno">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
Puedes ver el resultado en este enlace.
El hermano adyacente solo puede referirse al Item 2 al ser el posterior al primer elemento indicado en la notación ‘li.uno+li’.
