CODEWITHSUNDEEP
css
Bart
Bart

Reputation: 107

what does multiple class references in css do?

So obviously this question will need a bit more explaining.

what is the difference between this:

.class1 .class2 {blahblah}

this:

.class1, .class2 {blahblah}

and this:

.class1 > .class2 {blahblah}

I'm having trouble understanding the differences. I'd like this to be explained in as much detail as possible. I haven't found anything anwhere that breaks it down to me in the way I'm looking for. Thank you.

Upvotes: 4

Views: 168

Answers (6)

Rounin
Rounin

Reputation: 29463

You are looking at three different selectors in CSS:

  • .class1 .class2 {} is the descendant selector - the styles will apply to any .class2 element which is a descendant of a .class1 element (no matter how many levels down)

  • .class1, .class2 {} is the multiple element selector - the styles will apply to any .class1 element and any .class2 element

  • .class1 > .class2 {} is the direct descendant selector - the styles will apply to any .class2 element which is an immediate child descendant of a .class1 element (if it is a grandchild or a great-grandchild, the styles won't apply)

There are many other selectors. Here are a few:

  • .class1 + .class2 {} is the immediate sibling selector - the styles will apply to any .class2 element which is an immediately adjacent sibling of a .class1 element (if it is a non-consecutive sibling, the styles won't apply)

  • .class1 ~ .class2 {} is the subsequent sibling selector - the styles will apply to any .class2 element which is a subsequent sibling of a .class1 element (no matter how many siblings later it appears)

  • .class1.class2 {} is the simultaneous selector - the styles will apply to an element only if it is both a .class1 element and a .class2 element (eg. style="class1 class2")

Examples:

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>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

  1. .class1 .class2 {}

This selects .class2 which is a child of .class1

  1. .class1, .class2 {}

This selects .class1 as well as .class2

  1. .class1 > .class2 {}

This selects .class2 which is immediately next to .class1

Have a look at the snippet below:

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

Hope this helps!

Upvotes: 0

Abdelaziz Mokhnache
Abdelaziz Mokhnache

Reputation: 4349

.class1 > .class2 targets the element .class2 that is a direct child of the element .class1

.class1 .class2 targets the element with .class2 that is inside an other element with .class1 no matter if it is it's direct child or not (it can be the child of child on so on).

.class1, .class2 targets the element with .class1 and the element with .class2.

this is the reference to MDN on this topic.

Upvotes: 0

Vladimir Salguero
Vladimir Salguero

Reputation: 5947

.class1 .class2 {rules}

Selects all elements with .class2 inside all elements with .class1

.class1, .class2 {rules}

Selects all elements with .class1 and all elements with .class2

.class1 > .class2 {rules}

Selects just child elements with .class2 where the parents is a element with .class1

Upvotes: 0

Robert
Robert

Reputation: 20286

.class1 .class2 {blahblah} affects element where class2 is ancestor to element having .class1

.class1, .class2 {blahblah} this means that css rules affects element having class1 or class2

.class1 > .class2 {blahblah} this means that .class1 needs to be parent of class2.

Examples:

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

Element B is child to Element A so both .class1 .class2 {} and .class1 > .class2 {} definition will affect it. 

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

In this case only .class1 .class2 {} will be correct because there is no direct relation parent->child between element B and A.

.class1 .class2 {}

and last one

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

only .class1, .class2 {} will work because there is no parent/child/ancestor relation between these elements.

You may find this link interesting.

Upvotes: 1

Rothrock
Rothrock

Reputation: 1512

Here is a great game that can teach you what each of those selectors does.

The space is the descendant selector. It says select all class2 that are a descendants of a class1.

The comma is an OR meaning select class1 or class2.

The > is the direct descendant meaning select all class2 that have a direct parent which is class1.

Upvotes: 0

Related Questions