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.
CSS class chaining versus comma separated vs space separated syntax
These selector is worked following code. And these selector's specificity is:
.someclassA.someclassB
: 0 2 0.someclassA .someclassB
: 0 2 0.someclassA
: 0 1 0
.someclassA.someclassB { color: red;}
.someclassA .someclassB { color: blue;}
.someclassA,.someclassB { color: green;}
<p class="someclassA">.someclassA</p><p class="someclassB">.someclassB</p><p class="someclassA someclassB">.someclassA.someclassB</p><p class="someclassA"> <span class="someclassB">.someclassA .someclassB</span></p><p class="someclassB"> <span class="someclassA">.someclassB .someclassA</span></p>
Is placing commas between multiple CSS ID Selectors ok?
The first example is correct, you can legitimately comma separate those selectors
EDITED: @ovokuro is correct BOTH are correct.
The first example would apply a style to three different elements with those three ID's
The second would target the last ID, which is a child of the ID before, which is also a child of the ID before.
Can multiple classes be assigned to an element using a comma?
According to specs the first one is invalid:
class = cdata-list [CS] This attribute assigns a class name or set of
class names to an element. Any number of elements may be assigned the
same class name or names. Multiple class names must be separated by
white space characters.
The second one is valid.
References
class attribute
Applying CSS rule to multiple class inside a class
As stated here, you pretty much have to use .clear
multiple times, like so:
.clear select, .clear input, .clear p, .clear .section-content {
opacity: 0;
transition: 0.2s;
}
Sadly, with CSS alone there is no other way.
Comma in CSS, multiple selectors using the same CSS
.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }
You should add the full ancestor path for both rules. Not just where you see differences.
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.
Difference between space and comma -- CSS property values(not in selector)
Space:
Each value make different function. For example:
font: bold 60px helvetica, arial, sans-serif;
bold = font-weight: bold;
60px = font-size: 60px;
bold
do the weight and 60px
do the size, these two are different from each other.
Comma:
helvetica, arial, sans-serif = font-family: helvetica, arial, sans-serif;
Values in comma do the same function. They all change font-family
.
In this case:
If helvetica
it's not supported then loads arial
, if arial
it's not supported then loads sans-serif
.
Using fonts with two words:
If you use fonts that contains two words and have spaces like Roboto Slab
.
For these fonts you have to put them on double quotes "roboto slab"
.
Example: font: bold 60px "roboto slab", arial, sans-serif;
Dynamic CSS style class that has a space or comma
This is what I have that works but is it working by a fluke or is the right way?
Your examples only work because in these specific examples CSS handles your single class as two separate classes. Especially this one:
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
.Incomplete, .Overdue {
color: white;
background-color: red;
}
only works because of the .Overdue
. To use commas and spaces in class names you would have to do it like this:
[class="Incomplete, Overdue"] { color: white; background-color: red;}
<span class="Incomplete Overdue">Incomplete Overdue</span><span class="Incomplete, Overdue">Incomplete, Overdue</span>
Related Topics
Css Change Button Style After Click
How to Make Ng-Select Remove-And-Read-Only
How to Add Fonts to Create-React-App Based Projects
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Opacity of Background-Color, But Not the Text
Center an Element in Bootstrap Navbar
Which CSS Properties Are Inherited
Setting Width/Height as Percentage Minus Pixels
What Is Webkit and How Is It Related to Css
Pure CSS Checkbox Image Replacement
Css Files Are Not Loading in Laravel View
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Set Background Image and Opacity in the Same Property
How to Get Ff 33.X Flexbox Behavior in Ff 34.X