Selector descendiente

<< Agrupación de selectores Selector hijo >>

El selector descendiente es una forma de denominar a ciertos elementos que están dentro de otros. La forma de reflejar esto en CSS es mediante un espacio.

form .btn{
    border-radius: 5px;
    background-color: darkcyan;
    color: white;
}

En el ejemplo anterior, estamos aplicando un fondo a todos los elementos con la clase .btn que estén dentro de un form (sean hijos, nietos, etc.) De esta forma, si hay un .btn fuera con la del elemento form no se le aplicarán los estilos. Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo selectores</title>
    <link rel="stylesheet" href="selectores.css">
</head>
<body>
    <form action="#" method="post">
        <button class="btn btn-page">Atrás</button>
        <button id="sig" class="btn btn-page">Siguiente</button>
        <button class="btn btn-cancel">Cancelar</button>
   </form>
   <p class="btn">Botón</p>
</body>
</html>

<< Agrupación de selectores Selector hijo >>