What is the difference in the statement of these two options?

Asked

Viewed 48 times

0

1- that 

.back.flipped

and different from that?

.flipped

2- this 

.front.flipped

and different from that?

.back.flipped
css

2 answers

4

HTML classes inside the attribute class="" are delimited by spaces and in the CSS are delimited by point (.), a class in the CSS that contains .foo.bar or .bar.foo (independent of the 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">

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

The .flipped searches for any element that has the 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>

Already the .back.flipped (or inverted .flipped.back) searches 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 is with the .front.flipped (or .front.flipped), as:

.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 a read on this question:

2

.back.flipped

It means an element that has both the class .back how much .flipped.

.flipped

Means an element that has only the class .flipped.

ADDITIONAL:

.back .flipped (separated)

Means an element with the class .flipped within an element with the class .back:

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.