Como pegar todos os elementos do mesmo nível no CSS?

CSS

27/11/2017

Fala pessoal,

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

Carlos Arantes

Curtidas 0

Melhor post

Calebe Menezes

Calebe Menezes

01/12/2017

Olá Carlos, tudo bem?

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!
GOSTEI 3

Mais Respostas

Felipe Morais

Felipe Morais

27/11/2017

Tente usar este seletor:

<style>
  p.paragrafo-destaque {
    color: red;
  }
</style>
GOSTEI 0
Carlos Arantes

Carlos Arantes

27/11/2017

Opa Moraissan, não era isso o que eu queria.

Eu preciso pegar todos os elementos p que estão no mesmo nível do elemento p que tem a classe "paragrafo-destaque"
GOSTEI 0
Marcelo Santana

Marcelo Santana

27/11/2017

Boa tarde, Carlos.
É 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.
GOSTEI 1
POSTAR