Nesting CSS Classes

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



Leave a reply



Submit