Selector hermano general

<< Selector hermano adyacente Selector universal >>

Si por lo contrario lo que queremos es seleccionar todos los hermanos en general sin tener en cuenta si son adyacentes o no, tendremos que utilizar el símbolo ~. Veamos un 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>
        <p>hola</p>
        <button class="btn btn-cancel">Refrescar</button>
        <button class="btn btn-cancel">Reset</button>
   </form>
   <p class="btn">Botón</p>
</body>
</html>

Si nos fijamos, no es necesario que la clase .btn se encuentre adyacente al primero, sino que basta con que sean hermanos en el mismo nivel.

<< Selector hermano adyacente Selector universal >>