html5 y css3
/

Los selectores jerárquicos en CSS3 y HTML5

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>
Selectores jerárquicos. Descendientes
Selectores descendientes

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.

Selectores jerárquicos. Descendientes
Selectores hijos

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.

Selectores jerárquicos - Hemano adyacente
Hermano adyacente

El hermano adyacente solo puede referirse al Item 2 al ser el posterior al primer elemento indicado en la notación ‘li.uno+li’.

Deja una respuesta