Índice

Selectores jerárquicos

A B

Descendientes

Selecciona cualquier elemento B que es descendiente del elemento A.

A > B

Hijos

Selecciona cualquier elemento B que es hijo directo del elemento A.

A + B

Hermano adyacente

Selecciona cualquier elemento B precedido inmediatamente del elemento A.

Ejemplo 1

<!DOCTYPE html>  
<html lang="es">  
<head>  
<title>Html5</title>  
<meta charset="UTF-8">   
<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>  
</head>  
<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>
images/CAP21IMG01.png

Ejemplo 2

<!DOCTYPE html>  
<html lang="es">  
<head>  
<title>Html5</title>   ...