1

Quando queremos modificar uma div, e ela tem uma class tal, é fácil.

.umaclass{
   /*Formatação*/
}

Mas vamos supor que eu queira pegar uma div que não possui tal class, sem modificar as que tem a class... Como faço?

Por exemplo:


Tenho várias divs com a mesma class, teste e testando :

<div class="teste testando"></div>
<div class="teste testando"></div>
<div class="teste testando"></div>

<div class="teste"></div> //SOMENTE ESSA SER MODIFICADA, SEM MODIFICAR AS OUTRAS

Mas quero modificar somente a class teste mas sem modificar os que tem a class testando como faço isso?

0

2 Respostas 2

3

A resposta do Anderson Carlos Woss provavelmente atenderá suas necessidades, mas caso queira saber, também existe o :not no css, olha:

.teste:not(.testando){
  background-color: red;
  height: 50px;
  width: 100px;
}
<div class="teste testando"></div>
<div class="teste testando"></div>
<div class="teste testando"></div>

<div class="teste"></div>

Ele aceita um seletor simples como argumento, e selecionará todos os elementos que não se encaixam naquele seletor

2
  • Obrigado, Artur, o que eu queria fazer, com o not deu certo! Commented 24/05/2017 às 18:19
  • 1
    @LucasCarvalho Disponha :) Commented 24/05/2017 às 18:19
2

CSS funciona do mais genérico para o mais específico. Ou seja, você pode estilizar todas as div com apenas div { ... } e depois estilizar .umaclass sobrescrevendo as propriedades desejadas.

Veja um exemplo:

.teste {
  display: none;
}

.testando {
  display: block;
}
<div class="teste testando">1</div>
<div class="teste testando">2</div>
<div class="teste testando">3</div>

<div class="teste">4</div

Perceba que a última div mantém a estilização padrão, definida em .teste, enquanto as outras foram estilizadas conforme .testando.

5
  • Mas por exemplo. Quero por um display none na class teste mas que as outras, que possuem a class testando, continuem aparecendo. Commented 24/05/2017 às 18:14
  • Consegui com o not: do Artur :) Commented 24/05/2017 às 18:18
  • 1
    @LucasCarvalho o Not é a melhor forma de fazer isso, mas o que ele quis dizer que você pode botar a class do display none somente no objeto que você não quer que apareça que ele vai sobrescrever o display para você. Commented 24/05/2017 às 18:25
  • 1
    @LucasCarvalho o funcionamento é o mesmo. Você define o comportamento de .teste como display: none e depois especializa o estilo de .testando com display: block, para que tais elementos continuem aparecendo. O termo especializa é porque uma vez que os elementos .testando também possuem a classe .teste, eles devem possuir seu estilo. Ou seja, parte de um estilo genérico, .teste, para um mais específico, .testando. Alterei a resposta para esse exemplo.
    – Woss
    Commented 24/05/2017 às 18:30
  • Entendi, vendo aqui, consigo fazer com os 2 mesmo. Commented 24/05/2017 às 18:31

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 .