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
p.cat
selects paragraph elements with thecat
class.p .cat
selects all elements with thecat
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
Make a <Br> Instead of <Div></Div> by Pressing Enter on a Contenteditable
Is It the Last 'Script' Element the Currently Running Script
Bootstrap 3 Accordion Collapse Does Not Work on Iphone
How to Have Select Filter in Ngtable
How to Position a React Component Relative to Its Parent
How to Fix Chart Legends Width-Height with Overflow Scroll in Chartjs
How to Color Specific Letters in HTML Element Text
How to Extract Color Values from Rgb String in JavaScript
How to Get the Real (Unscaled) Size of an Embedded Image in the Svg Document!
Generate Random Element Position and Prevent Overlapping in JavaScript
Determine Whether Element Has Fixed or Percentage Width Using JavaScript
Change the :Before Selector from JavaScript
Get 3D CSS Rotation Value from Matrix3D() with JavaScript
How to Save Data from a Form with HTML5 Local Storage
Passing Mouse Clicks Through an Overlaying Element <Div>
How to Detect Internet Explorer (Ie) and Microsoft Edge Using JavaScript