Nesting CSS classes
Not possible with vanilla CSS. However you can use something like:
- Sass
Sass makes CSS fun again. Sass is an
extension of CSS3, adding nested
rules, variables, mixins, selector
inheritance, and more. It’s translated
to well-formatted, standard CSS using
the command line tool or a
web-framework plugin.
Or
- Less
Rather than constructing long selector
names to specify inheritance, in Less
you can simply nest selectors inside
other selectors. This makes
inheritance clear and style sheets
shorter.
Example:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Nested classes and tags
You can't do it in pure CSS - use SCSS/SASS or Less:
(The below should work for both of the above languages):
.fullPageGallery {
width: 100%;
height: 100%;
h1 { /* Properties */ }
.AnotherClass { /* Properties */ }
}
How to reference nested classes with css?
In CSS, classes
are prefixed by a .
, ids
are prefixed by #
, and elements are not prefixed at all.
This is how you need to declare your CSS:
.box1 .box-body i {
width: 30px;
}
Note that box1
and box-body
are both classes, while i
is an element.
Example:
<div class="class"></div>
<div id="id"></div>
<div></div>
I have listed three different <div>
elements. This is how they would be accessed in CSS:
// first div
.class {
[some styling]
}
// second div
#id {
[some styling]
}
// third div
div {
[some styling]
}
Trying to create a css class in angular but nested .getting error ( for using '}' before i write another class inside the main one))
If you want to apply two classes on a same element try the following structure.
.style-class-a { background-position:fixed; background-color:black; }.style-class-a.style-class-b { background-color:green; }
<div class="style-class-a" style="height: 50px; width: 50px"></div><br><div class="style-class-a style-class-b" style="height: 50px; width: 50px"></div>
How to access a nested css class
Your code:
.a {
b.c {
color: red;
}
}
Can be accessed via
<div class="a"> <!-- parent with class "a" -->
<b class="c">This text will be red</b> <!-- <b> tag with class "c" -->
</div>
Explanation
In less, when you nest as you are, you are saying that the nested rules only apply to elements that are inside an element that matches the selector of it's parent. The rule you wrote is looking for any <b>
tag that has a class c
which has a parent with class a
The CSS that would be output from your code would be
.a b.c {color: red;}
If you wanted to access one element, and as your broken HTML indicates, have the b
be a class instead of an element selector, then you could make your LESS:
.a {
&.b.c {
color: red;
}
}
Can be accessed via
<p class="a b c">
This text will be red
</p>
Nesting CSS classes for use with Javascript
.shrink .navbar-default {
background:rgba(241,241,242,0.75);
}
This is finding elements with the .navbar-default
class under the shrink class. So, it's basically assuming you have a structure of
<div class=shrink>
<div class="navbar-default">
</div>
</div>
What you want instead is for it to apply to elements with both shrink
and navbar-default
, so you can do
.shrink.navbar-default {
background:rgba(241,241,242,0.75);
}
CSS class nesting not working
You cannot do that with regular css. The only way to achieve what you want with regular css is like this:
.aligncenter {
clear: both;
color: #000000
}
h2.aligncenter {
clear: both;
color: #000000
text-align: center;
}
To do nesting and other cool stuff you need some css extension language like SASS
Related Topics
Why Isn't It Possible to Combine Vendor-Specific Pseudo-Elements/Classes into One Rule Set
What's the Difference Between Align-Content and Align-Items
Opacity of Background-Color, But Not the Text
Why Do Browsers Create Vendor Prefixes For CSS Properties
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Semi-Transparent Color Layer Over Background-Image
Add Bootstrap Glyphicon to Input Box
How to Style the ≪Option≫ With Only Css
Difference Between Margin and Padding
Order Columns Through Bootstrap4
Set Size on Background Image With Css
Difference Between "Screen" and "Only Screen" in Media Queries
How to Style Child Components from Parent Component'S CSS File