Seleccionan elementos que guardan cierta relación entre sí.

Elemento <p> que es un hermano adyacente a un <div>

Elemento <p> que es un hermano no adyacente a un <div>

Elemento <p> que es un hermano no adyacente a un <div>

Estilos definidos

            div p{
                /* Selector de descendiente.
                   Se separan por un espacio: a b {…}
                */
                background-color: lightgrey;
            }
            
            div > p{
                /* El selector de hijo.
                   Separar selectores con '>': a > b {…}
                 */
                background-color: lightblue;
            }

            div ~ p{
                /* Selector de hermanos.
                   Separar selectores con '~': a ~ b {…}
                */
                background-color: lightcoral;
            }
            div + p{
                /* Selector de hermano adyacente.
                   Se separan por un signo '+': a + b {…}
                */
                background-color: lightgreen;
            }