Como pegar todos os elementos do mesmo nível no CSS?
27/11/2017
0
Tenho a seguinte estrutura html:
<div> <p>Parágrafo 1</p> <p class="paragrafo-destaque">Parágrafo 2</p> <div> <p>Sub-parágrafo 1</p> <p>Sub-parágrafo 2</p> </div> <p>Parágrafo 3</p> <a href="link">Link 1</a> <p>Parágrafo 4</p> </div> <p>Texto do rodapé</p>
Eu gostaria de pegar todos os parágrafos que estão no mesmo nível do parágrafo com a classe "paragrafo-destaque" e fazer isso via CSS. Tem como fazer isso?
Carlos Arantes
Post mais votado
01/12/2017
Acredito que o que mais se aproxima do que você quer no CSS é o seletor geral de irmãos (~). Só que pelo que vi ele tem um porém. Ele irá pegar todos os elementos de mesmo nível após o elemento que você indicar.
Então no seu caso o parágrafo 1 não seria selecionado nessa situação, apenas o 3 e o 4.
Não sei se a versão mais nova do CSS possibilita você fazer isso, mas acredito que se no CSS vocÊ não conseguir resolver essa situação, você poderá recorrer ao JavaScript.
Espero ter ajudado!
Calebe Menezes
Mais Posts
28/11/2017
Felipe Morais
<style>
p.paragrafo-destaque {
color: red;
}
</style>
30/11/2017
Carlos Arantes
Eu preciso pegar todos os elementos p que estão no mesmo nível do elemento p que tem a classe "paragrafo-destaque"
01/12/2017
Marcelo Santana
É simples. determine um id, ou classe para a tags(no caso a div) principal que contém as tags (nesse caso os parágrafos) que deseja estilizar.
No css, utilize o id que determinou, sinal de maior ">" (esse sinal que determinará que só será selecionado o próximo nível do que você determinar após ele).
Veja o exemplo abaixo.
<html !DOCTYPE html>
<head>
<title>
Testando Check - Javascript puro
</title>
<style>
.div>p{
color: white;
background-color: red;
text-decoration: bold;
}
</style>
</head>
<body>
<div class="div">
<p>Parágrafo 1</p>
<p class="paragrafo-destaque">Parágrafo 2</p>
<div>
<p>Sub-parágrafo 1</p>
<p>Sub-parágrafo 2</p>
</div>
<p>Parágrafo 3</p>
<a href="link">Link 1</a>
<p>Parágrafo 4</p>
</div>
<p>Texto do rodapé</p>
</body>
</html>
Abraço.
Clique aqui para fazer login e interagir na Comunidade :)