Combinando seletores

by estevanmaito

HTML

<main>
    <h1 class="titulo">Minha página</h1>
    <h1 class="cumprimento">Seja bem-vindo(a)</h1>
    <p class="titulo">Não será selecionado por h1.titulo, que atinge apenas capeçalhos com estas classes.</p>
    <p>Não será selecionado por h1 + p, pois não tem como irmão imediato um h1</p>
    <section>
        <h1>main é meu avô e eu herdo a regra main h1</h1>
        <h2>Section é meu pai, não meu irmão.</h2>
        <p>Não será selecionado pelo seletor main > p, pois não é filho direto do main</p>
    </section>
    <h2>Quem somos</h2>
</main>

CSS

/* AB */
/* todos h1 com a classe título */
h1.titulo {
    font-family: sans-serif;
    color: blue;
}

/* A B */
/* todos h1 que estejam em qualquer nível dentro de main */
main h1 {
    text-decoration: underline;
}

/* A > B */
/* todos p que sejam filhos diretos de main */
main > p {
    color: red;
}

/* A + B */
/* todos p que tenham como irmão imediato um h1 */
h1 + p {
    font-size: 22px;
}

/* A ~ B */
/* todos h2 que tenham section como irmão */
section ~ h2 {
    color: green;
}