What the Difference Between Classes with Space and No Space in CSS, What the Use of Multiple Classes with No Space

What the difference between classes with space and no space in css, what the use of multiple classes with no space

.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.

So you probably ask what's the difference between .classA .classB and .classA.classB selectors.

First selector will match any element with class classB that's placed within element with class classA, eg.:

<div class="classA">
  <p>
    Hello World!
    <span class="classB">this text will be matched by first selector</span>
    Lorem ipsum!
  </p>
</div>

Second selector will match any elements with both, classA and classB classes, eg.:

<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>

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.

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

Space/ no space between css selectors and classes of elements

1. p.cat selects paragraph elements with the cat class.
2. p .cat selects all elements with the cat class that are descendants of paragraph elements.

When combining selectors does space means the same as no space?

Yes, spaces are significant in CSS rules.

#tag.flower means an element with both id="tag" and class="flower", where #tag .flower means an element with class="flower" inside of an element with id="tag".

For instance:

#tag.flower

<div id="tag" class="flower"></div>

#tag .flower

<div id="tag">
    <div class="flower"></div>
</div>

Multiple class definitons with space means something?

Yes. In CSS selectors, unlike Javascript for example, whitespace is not ignored.

.A.B Will select elements that have both class A and class B.

.A .B Will select any .B class elements that are inside .A class elements.

Example:

<A class="A B">
    <B class="A"></B>
    <B class="B"></B>
</A>

In this case:

.A.B Will return only the <A class="A B"> element.

.A .B Will return <B class="B">, as it is a B class element inside an A class element.

Sources:

• Stack Overflow: CSS Selectors, > versus space
• CSS Tricks: Multiple Selectors

What is the difference between '' and a space in CSS selectors?

A > B will only select B that are direct children to A (that is, there are no other elements inbetween).

A B will select any B that are inside A, even if there are other elements between them.

When to put space between a tag name and a class or id

header.classname mean you are targeting header having class as classname.

header .classname mean you are targeting the html element having class classname which is a child/descendent of header

1st case:

header.hclassname {  background: turquoise;}

<header class="hclassname">  Lorem Ipsum  <div class="divclassname">Dolor</div>  Sit Amet</header>

Use a space or greater than sign in CSS selector?

No they are completely different, using > selects a child element whereas using a space will select a nested element at any level.

For example…

Using ␣/space in the selector…

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

So here, the selector having space will target the div at any nested level of the parent element.

Demo (Using ␣/space)

.welcome div {
    font-size: 20px;
    color: #f00;
}

---

Using >

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

Whereas here, the selector will target your div which is a child of the element having .welcome but it won't select the div which is nested inside section tag as it is a grandchild (but not a child) of the outer div.

Demo 2 (Using >)

.welcome > div {
    font-size: 20px;
    color: #f00;
}

---

From MDN : (For ␣)

The ␣ combinator (that's meant to represent a space, or more
properly one or more whitespace characters) combines two selectors
such that the combined selector matches only those elements matching
the second selector for which there is an ancestor element matching
the first selector. Descendant selectors are similar to child
selectors, but they do not require that the relationship between
matched elements be strictly parent-child.

From MDN : (For >)

The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first. By contrast, when two selectors are
combined with the descendant selector, the combined selector
expression matches those elements matched by the second selector for
which there exists an ancestor element matched by the first selector,
regardless of the number of "hops" up the DOM.

---

Related Topics