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’.