1- isso
.back.flipped
e diferente disso?
.flipped
2- isso
.front.flipped
e diferente disso?
.back.flipped
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:
.back.flipped
Significa um elemento que possui tanto a classe .back
quanto .flipped
.
.flipped
Significa um elemento que possui apenas a classe .flipped
.
.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>