What's the difference in the declaration of these two options?

Navigation
0

1-this 

.back.flipped

What's different about this? 

.flipped

2- This 

.front.flipped

What's different about this? 

.back.flipped
    
asked by anonymous 25.11.2017 / 15:35

2 answers

2
.back.flipped

It means an element that has both the .back and the .flipped classes. 

.flipped

It means an element that has only the class .flipped .

ADDITIONAL:

.back .flipped (separated)

It means an element with class .flipped within an element with class .back : 

<div class="back">
    <input class="flipped" type="text" />
</div>
    
25.11.2017 / 15:50
2

HTML classes within the class="" attribute are delimited by spaces and in CSS are delimited by point ( . ), a class in CSS that contains .foo.bar or .bar.foo (regardless of order) will search in HTML something like: 

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

Being able to have more classes or not within the class= attribute will still be recognized by CSS

The .flipped looks for any element that has class flipped , examples: 

.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>

While .back.flipped (or inverted .flipped.back ) looks for elements like: 

.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>

The same thing with .front.flipped (or .front.flipped ), like: 

.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>

Enjoy and read about this question:

25.11.2017 / 15:44
How to apply a rule for a specific element? Delete an element of a specified div