Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

duvida no css

Tô aprendendo CSS e preciso de um help aqui de vocês, sobre essas tag para aplicar estilos, pois não tô entendendo.

main > p {color:red}

img + p {color: blue}

img ~p {color:black}

.principal p:not(#missao) {color:red}

1 resposta
solução!

Oi Dayson, tudo certo?

Bora entender então o que essas tags significam! Vamos começar pela primeira:

main > p {
    color: red;
}

Isso irá selecionar todos os parágrafos que são filhos diretamente da main, exemplo:

<main>
    <p>Oie</p>
    <div>
        <p>Esse parágrafo não será selecionado, pois não é filho diretamente da main, e sim de uma div. </p>
    </div>
</main>

Próximo seletor:

img + p {
    color: blue;
}

Isso irá selecionar o primeiro parágrafo que vem exatamente depois da imagem! Exemplo:

<img src="imagem.png"/>
<p>Olá</p>

Próximo seletor:

img ~ p {
    color: black;
}

Seleciona todos os parágrafos que vem depois de uma imagem. Exemplo:

<img src="imagem.png"/>
<p>Oie</p>
<p>Esse elemento também será selecionado<p>

Agora vamos para o último seletor:

.principal p:not(#missao) {
        color: red;
}

Esse é um seletor de negação, ou seja, ele irá pegar todos os parágrafos que não possuem o ID missao, e aplicar uma cor vermelha!

Espero ter ajudado, bons estudos =)