Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.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.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
Related
Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.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.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
I have the following simplified structure:
<div class="ion-page ion-page-hidden">
<div class="generated-plan />
</div>
<div class="ion-page">
<div class="generated-plan />
</div>
I need a CSS selector which selects elements with class "generated-plan" which are not a child of an element which has the class "ion-page-hidden". My expectation is that it matches only the second div.
In my real code there are more elements between the ion-page div and the generated-plan div. Also there may be multiple elements with ion-page-hidden class, if this is relevent for the answer.
Background: I'm trying to get reactour to work with Ionic react. Ionic keeps loaded components hidden. Reactour highligts the first element which matches the selector, which may one of the hidden ones. I can't change the properties of the outer div, this is Ionic magic, the inner div is a custom component.
I am guessing (so please check) that you are looking for these conditions:
the parent element must have the .ion-page class
the parent element must NOT have the .ion-page-hidden class
the child element has the class .generated-plan
The first condition is met by using the class selector .ion-page. The second condition is met by using the not selector with the class selector :not(.ion-page-hidden).
However, both conditions apply on this element. So what you need to do is set them after each other without any space between them .ion-page:not(.ion-page-hidden).
For the third condition you can use the descendant selector (space) with class selector
All together:
div {
border: 1px solid black;
padding: 1em;
margin: 1em;
}
.ion-page:not(.ion-page-hidden) .generated-plan {
background: yellow;
}
<div class="ion-page ion-page-hidden">
.ion-page div
<div class="generated-plan">one</div>
</div>
<div class="ion-page">
.ion-page div
<div class="generated-plan">two</div>
</div>
Here is an example that I do not understand:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by a comma (,), and some just by a space?
I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the CSS file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?
.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.
.container_12 .grid_6 { ... }
This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.
.container_12 > .grid_6 { ... }
Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.
.container_12, .grid_6 { ... }
A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.
Not exactly what was asked, but maybe this will help.
To apply a style to an element only if it has both classes your selector should use no space between the class names.
For Example:
.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.
Therefore
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.
The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.
The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.
Hope I have helped.
You have four classes and two selectors in your example:
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.
For example:
<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
The above means that you are applying styles to two classes, indicated by the comma.
When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.
in the example:
<div class="grid_6">This is not effected</div>
<div class="container_12">
<div class="grid_6">
This is effected.
</div>
</div>
The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.
A statement like
#admin .description p { font-weight:bold; }
Would only apply the bold to tags within areas that have class "description" that are inside of an area with id "admin", such as:
<div id="admin">
<div class="description">
<p>This is bold</p>
</div>
</div>
Selectors combinations get different meanings - attached image explains easily
a) Multiple selectors separated by a comma(,) - Same styles are applied to all selected elements.
div,.elmnt-color {
border: 1px solid red;
}
Here border style is applied to DIV elements and CSS class .elmnt-color applied elements.
<!-- comma example -->
<div>
Red border applied
</div>
<p class="elmnt-color">
Red border applied
</p>
b) Multiple selectors separated by space – Those are called descendant selectors.
div .elmnt-color {
background-color: red;
}
Here border style is applied to CSS class .elmnt-color applied elements which are child elements of a DIV element.
<!-- space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border applied
</p>
</div>
c) Multiple selectors specified without space - Here styles are applied to elements which meet all the combinations.
div.elmnt-color {
border: 1px solid red;
}
Here border style is applied only to DIV elements with a CSS class of .elmnt-color.
<!-- no space example -->
<div>
Red border NOT applied
</div>
<p class="elmnt-color">
Red border NOT applied
</p>
<div>
Red border NOT applied
<p class="elmnt-color">
Red border NOT applied
</p>
</div>
<div class="elmnt-color">
Red border applied
</div>
Details are attached at https://www.csssolid.com/css-tips.html
Note: CSS Class is just one of the CSS Selectors. These rules applies to all CSS Selectors (ex: Class, Element, ID etc.,).
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
width:460px will be only applied to .grid_6 and .grid_8
Edit: Here is a very good article for you
http://css-tricks.com/multiple-class-id-selectors/
For markup similar to this:
<div>
<p>hello world</p>
</div>
<div>
<h4>hello world</h4>
</div>
Can you do something like this in CSS:
div:after {
content: "";
display: block;
border-bottom: 2px solid red;
}
p + div:after {
content: "";
display: block;
border-bottom: 2px solid blue;
}
...meaning to say "Give all :after pseudo elements immediately following a <p> a blue border. Give all others a red border".
This doesn't seem to work. I realize this is because the + sign is applying to the 'div' selector, not the 'div:after' selector as a whole. But is there another way to target these in CSS (without adding a new class specific to these instances and without manipulating the DOM)?
Basically, what Michael_B said:
You can't target a pseudo-element. A pseudo-element is added to a selector that has matched an element.
"Target" is a vague term, but the second sentence is on point here. Combinators only work with elements, because selectors match elements, not pseudo-elements. What you're really trying to do in selector nomenclature is to style the ::after pseudo-element of a div whose last child is a p element (in which case the ::after box immediately follows the p box in the formatting tree):
<div>
<p>hello world</p>
div::after <!-- Blue border -->
</div>
<div>
<h4>hello world</h4>
div::after <!-- Red border -->
</div>
And you can't do that, because there is no parent selector.
I imagine something like div:has(> p:last-child)::after from Selectors 4 will work, but it depends on whether :has() makes it into CSS in the first place. The only other good option is to figure out which of these div elements has a p as their last child and assign them a special class name.
See also:
Can I target a :before or :after pseudo-element with a sibling combinator?
Is there a CSS parent selector?
When do you separate style classes with a space? So for example: what is the difference between the following two blocks of css?
Block 1:
div {
color: brown;
}
div.special {
font-size: 18px;
}
Block 2:
div {
color: brown;
}
div .special {
font-size: 18px;
}
This is the HTML:
<div class="special">The quick brown fox jumps over the lazy dog.</div>
I tried both versions. Only with block 1 the text wil be in font size 18.
You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes.
For example, to refer to a div with two classes, e.g. <div class="foo bar"> you could use:
div.foo.bar {...}
To refer to the child span element <div class="foo"><span class="bar">stuff</span></div> you could use:
div.foo .bar {...}
A space indicates nesting:
div .foo /* .foo is inside div */
No space indicates further specificity:
div.foo /* any div that is also .foo */
div.special refers to
<div class="special"> <- this
div .special refers to
<div>
<p class="special"> <- this
</div>
Not neccassily a p BTW
The space notes that this is a child item.
IE
div.special
targets a div that has the class special while
div .special
targets an element with class special inside a div element
div.special will select the div element which has class .special and it wont select any other element with class .special so if you have something like <ul class="special"> will be excluded, where as this div .special will select all the elements having class .special which are nested inside div so this will select <ul class="special"> so it concludes that the 1st one is stricter than the second one
So in your case either you can simply use .special or you can use div.special