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>  ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Selectores de identificación
Siguiente
Pseudoclases