7

Olá, Tenho vários divs e alguns deles tem uma classe 'teste', gostaria que o seletor first-child destacasse apenas o primeiro DIV que tem a classe 'teste', porém, só funciona se a classe 'teste' esta no primeiro div. Pelo que entendi, o seletor pega o primeiro objeto do tipo e não a classe realmente. Alguém tem alguma idéia? Nesse exemplo abaixo, eu queria que o div com o "Teste 2" ficasse destacado pelo seletor (ele é o primeiro DIV que tem a classe teste).

.teste:first-child{
	background-color:#F00;
	border:solid 4px #33CCCC;	
}
<div>
  Teste 1
</div>
<div class="teste">
  Teste 2
</div>
<div class="teste">
  Teste 3
</div>
<div class="teste">
  Teste 4
</div>

1 Resposta 1

6

Não há seletores que façam isso infelizmente, os seletores atuais trabalham sobre a tag do elemento e não sobre a sua classe. O ideal aqui seria :first-of-class que não existe.

Há uma ideia interessante que resolve o teu problema. Que é usando o seletor ~.

Nesse caso aplicas o estilo a todas as classes, e depois desfazes usando o seletor .classe ~ .classe, e desse modo apagas o estilo em todas menos a primeira... O seletor procura assim por um elemento com a classe x, precedido por outro com a classe x.

Seria assim:

div.teste {
    background-color: #F00;
    border: solid 4px #33CCCC;
    color: #ccf;
}

.teste ~ .teste {
    background-color: transparent;
    border: none;
    color: #000;
}
<div>
  Teste 1
</div>
<div class="teste">
  Teste 2
</div>
<div class="teste">
  Teste 3
</div>
<div class="teste">
  Teste 4
</div>

jsFiddle: https://jsfiddle.net/1fxcxgn4/


Como referi não há uma solução imediata com CSS, apesar de ser executável. Se quiseres usar JavaScript para evitar sobrecarregar o CSS com regras que podem ser complexas de remover podes usar assim:

var primeiroTeste = document.querySelector('.teste');
primeiroTeste.classList.add('classe');

onde terias no CSS:

.classe {
    background-color:#F00;
    border:solid 4px #33CCCC;   
}

jsFiddle: https://jsfiddle.net/1fxcxgn4/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .