Differencebetween the Selectors ".Class.Class" and ".Class .Class"

What is the difference between the selectors .class.class and .class .class?

.class .class matches any elements of class .class that are descendants of another element with the class .class.

.class.class matches any element with both classes.

Difference between .class .class and .class .class

No, they aren't the same - the first example is a descendant selector, the second is a direct child selector.

---

.class .class will target all elements with the class .class which derive from any element which has the class .class, e.g

<div class="class">
 <div class="other">
    <div class="class"> This is targeted. </div>
 </div> 
</div>

jsFiddle example

---

.class > .class will only target direct children of elements with the class .class, e.g

<div class="class">
   <div class="other">
      <div class="class">This isn't targeted.</div>
   </div> 
   <div class="class">
      <div class="class">This is targeted, as it is a direct child.</div>
   </div>    
</div>

jsFiddle example.

Difference between .class and .class, .class .class?

Edit: As @Robin Kanters and others have pointed out, there as a minor difference with adding the .class .class selector - specificity. (This can be seen here)

Otherwise, the .class .class selector is redundant.

.ui-widget {
     font-size: 90% !important;
}

and

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

produce the same results.

FIDDLE

You can see in the above fiddle that the single .ui-widget selector is sufficient to produce the recursive inheritance of the font-size.

Difference of &.class vs & .class

The difference is this:

.parentClass {
  &.childClass {}
}

will actually generate the selector .parentClass.childClass, meaning that you are selecting for an element that has both classes, e.g. <div class="parentClass childClass">. This is likely not the case you want. Meanwhile, this:

.parentClass {
  & .childClass {}
}

will compile to:

.parentClass .childClass {}

...which will select an element with the class childClass that is a child of an element with the class parentClass, e.g.:

<div class="parentClass">
    <div class="childClass"></div>
</div>

---

As @deceze has pointed out, in your simplified example the & is not necessary, if all you want is to imply a hierarchical relationship, because it is syntactically identical to:

.parentClass {
  .childClass {}
}

...which also gives you .parentClass .childClass {}.

CSS Selectors - difference between and when to use , + or

In CSS these are called Combinators and means three different things:

1. div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.

2. div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.

3. div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.

Example:

In the following example:

<div>
  <p class="test">
    <a href="#" class="test">
      Testing link</a>
    <img class="test"/>
  </p>
  <span class="test">A span</span>
</div>
<h4 class="test">A title</h4>

• div > .test will match only <p> and <span> elements.
• div .test will match <p>, <a>, <img> and <span> elements.
• div + .test will match only <h4> element because it follows the <div> immediately.

Demo:

div .test {

  background: yellow;

}

div>.test {

  background: red;

}

div+.test {

  background: green;

}

<div>

  <p class="test">

    Pragraph

    <a href="#" class="test">

      link</a>

    <img class="test" width="50px" height="50px" />

  </p>

  <span class="test">Span</span>

</div>

<h4 class="test">Title</h4>

.class .class same classname selector in css

The first one styles child elements/descendant with the same class name:

<div class="validate-error">
    This color may be different from #cc2424
    <div class="validate-error">Has color #cc2424</div>
</div>

This means: The styles are applied/overwritten for child elements with the same class name.

---

The second one styles siblings:

<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>

That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.

Demo

Try before buy

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

---

Related Topics