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}
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}
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 =)