0

1- isso

.back.flipped

e diferente disso?

.flipped

2- isso

.front.flipped

e diferente disso?

.back.flipped

2 Respostas 2

4

Classes em HTML dentro do atributo class="" são delimitadas por espaços e no CSS são delimitadas por ponto (.), uma classe no CSS que contenha .foo.bar ou .bar.foo (independente da ordem) irá buscar no HTML algo como:

<div class="foo bar">
<div class="bar foo">
<div class="foo bar baz">
<div class="baz foo bar">

Podendo possuir mais classes ou não dentro do atributo class= ainda sim irá ser reconhecido pelo CSS

O .flipped busca qualquer elemento que tenha a classe flipped, exemplos:

.flipped {
    color: red;
}
<div class="flipped">fica em vermelho</div>
<div class="flipped ">fica em vermelho</div>
<div class=" flipped">fica em vermelho</div>
<div class=" flipped ">fica em vermelho</div>
<div class=" flipped     ">fica em vermelho</div>
<div class="flipped bar">fica em vermelho</div>
<div class="flipped bar baz">fica em vermelho</div>
<div class="flipped bar bar">fica em vermelho</div>
<div class="bar flipped">fica em vermelho</div>
<div class="bar baz flipped">fica em vermelho</div>
<div class="outro">não é afetado</div>

Já o .back.flipped (ou invertido .flipped.back) busca elementos como:

.back.flipped {
    color: blue;
}
<div class="flipped back">fica em azul</div>
<div class="back flipped">fica em azul</div>
<div class=" flipped back">fica em azul</div>
<div class=" flipped      back">fica em azul</div>
<div class="flipped bar back">fica em azul</div>
<div class="flipped bar baz back">fica em azul</div>
<div class="flipped bar bar back">fica em azul</div>
<div class="bar flipped back">fica em azul</div>
<div class="bar baz flipped back">fica em azul</div>
<div class="outro">não é afetado</div>

O mesmo é com o .front.flipped (ou .front.flipped), como:

.front.flipped {
    color: #fc0;
}
<div class="flipped front">fica em laranja</div>
<div class="back front">não é afetado</div>
<div class=" flipped front">fica em laranja</div>
<div class=" flipped      front">fica em laranja</div>
<div class="flipped bar front">fica em laranja</div>
<div class="flipped bar front back">fica em laranja</div>
<div class="flipped front bar back">fica em laranja</div>
<div class="front flipped back">fica em laranja</div>
<div class="bar front flipped back">fica em laranja</div>


Aproveite e de uma lida nesta pergunta:

2
.back.flipped

Significa um elemento que possui tanto a classe .back quanto .flipped.

.flipped

Significa um elemento que possui apenas a classe .flipped.

ADICIONAL:

.back .flipped (separados)

Significa um elemento com a classe .flipped dentro de um elemento com a classe .back:

<div class="back">
    <input class="flipped" type="text" />
</div>

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 .