In CSS is .a.b different than .a .b?

Question

In my css file is .a.b different than .a .b?

It's a simple question but it's always annoyed me. I tried it, but figured I would post it here in case this was useful as a reference.

Answer 1

In my css file is .a.b different than .a .b?

Yes

.a.b is one or more elements with both classes.

<div class="a b">(target)</div>

.a .b is one or more elements with class b with any parent element with class a

<div class="a"><div class="b">(target)</div></div>

or even

<div class="a">
  <div>
    <div>
      <div class="b">(target)</div>
   </div>
   <div class="b">(target)</div>
   <div class="b">(target)
     <div class="b">(target)</div></div>
  </div>
</div>

They are very different.

I chose the direction in the example .a .b from right to left as all .b elements are the ones that will be the target for the CCS.

Additionally you could even do div.a.b for my first example and div.a div.b for the second examples.

Relevant Articles:

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 2

• .a.b means "an element with both class a and class b"

  Example:

  <div class="a b">(element)</div>
  

• .a .b means "an element with class b for which either its parent or grand-parent or grand-grand-parent, etc, has class a"

  Examples:

  <div class="a">
    <div class="b">(element)</div>
  </div>
  

  <div class="a">
    <div class="c">
      <div class="b">(element)</div>
    </div>
  </div>