What makes some class references in css?

Question

Therefore, obviously, this question will need a little more detail.

what's the difference between this:

.class1 .class2 {blahblah}

.class1, .class2 {blahblah}

and this:

.class1 > .class2 {blahblah}

I'm having trouble understanding the differences. I would like this to be explained as detailed as possible. I did not find anything that could break it to me the way I am looking. Thank.

Answer 1

.class1 .class2 {blahblah} affects an element where class2 is the ancestor of an element having .class1

.class1, .class2 {blahblah} this means css rules affect an element having class 1 or class2

.class1 > .class2 {blahblah} This means that .class1 must be the parent of class2.

<strong> Examples:

<elementA class="class1">
  <elementB class="class2"></elementB>
</elementA>

Element B is a child of A; therefore, the definition of .class1 .class2 {}and affects it .class1 > .class2 {}.

<elementA class="class1">
  <elementC>
      <elementB class="class2"></elementB>
  </elementC>
</elementA>

.class1 .class2 {} , parent- > child B A.

.class1 .class2 {}

<elementA class="class1"></elementA>
<elementB class="class2"></elementB>

only .class1, .class2 {} , //.

.

Answer 2

• .class1 .class2 {}

.class2, .class1

---

2. .class1, .class2 {}

.class1, .class2

---

3. .class1 > .class2 {}

.class2, .class1

---

:

.case1 .class1 .class2 {
  background-color: red;
  color: white;
}

.case2 .class1, .case2 .class2 {
  background-color: red;
  color: white;
}

.case3 .class1 > .class2 {
  background-color: red;
  color: white;
}

pre {
  display: inline-block;
  background: #ff0;
}

<div class="case1">
  <strong>Case 1: <pre>.class1 .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
  </div>
</div>
<br><br>
<div class="case2">
  <strong>Case 2: <pre>.class1, .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
  </div>
</div>
<br><br>
<div class="case3">
  <strong>Case 3: <pre>.class1 > .class2</pre></strong>
  <div class="class1">Class1
    <div class="class2">Class2</div>
    <div class="class3">
      <div class="class2">Class2</div>
    </div>
  </div>
</div>

Hide result

, !

Answer 3

CSS:

• .class1 .class2 {} - - .class2, .class1 ( , )

• .class1, .class2 {} - - .class1 .class2

• .class1 > .class2 {} - - .class2, .class1 ( , )

. :

• .class1 + .class2 {} - sibling - .class2, .class1 ( , 't )

• .class1 ~ .class2 {} - sibling - .class2, .class1 ( , )

• .class1.class2 {} - - , .class1 .class2 (, style="class1 class2")

< > :

div {border: 1px solid rgb(191,191,191); padding:6px;}
.class1 {border: 1px solid rgb(0,127,0);}
.class1, .class2 {font-family:arial, helvetica, sans-serif;}
.class1 .class2 {font-weight: bold;}
.class1 > .class2 {color:rgb(0,0,255);}
.class1 ~ .class2 {font-style: italic;}
.class1 + .class2 { color:rgb(255,0,0);}
.class1.class2 {text-decoration: underline;}

<ul>
<li style="border: 1px solid rgb(191,191,191); padding:6px;">a div has a border around it</li>
<li style="border: 1px solid rgb(0,127,0); padding:6px;">a .class1 has a green border around it</li>
<li>.class1, .class2 is <span style="font-family:arial, helvetica, sans-serif;">sans-serif</span></li>
<li>.class1 .class2 is <strong>bold</strong></li>
<li>.class1 > .class2 is <span style="color:rgb(0,0,255);">blue</span></li>
<li>.class1 ~ .class2 is <em>italic</em></li>
<li>.class1 + .class2 is <span style="color:rgb(255,0,0);">red</span></li>
<li>.class1.class2 is <u>underlined</u></li>
</ul>

<div class="class1">
<p>I am a paragraph with no class. The 5 paragraphs below are all .class2.</p>
  
<p class="class2">I am .class1 > .class2 and .class1 .class2</p>
<div>
<p class="class2">I am just .class1 .class2</p>
</div>
</div>

<p class="class2">I am .class1 + .class2 and .class1 ~ .class2</p>
<p class="class2">I am just .class1 ~ .class2</p>
<p class="class1 class2">I am .class1 ~ .class2 and  .class1.class2</p>

<div>
<p class="class1 class2">I am just .class1.class2</p>
</div>

Hide result

Answer 4

, , .

- descendant. , class2, 1.

, class1 class2.

The > - direct descendant, 2, , 1.

Answer 5

.class1 .class2 {rules}

.class2 .class1

.class1, .class2 {rules}

.class1 .class2

.class1 > .class2 {rules}

.class2, - .class1

Answer 6

.class1 > .class2 .class2, .class1

.class1 .class2 .class2, .class1 , ( ).

.class1, .class2 .class1 .class2.

MDN .