CSS class nesting not working

Question

I have a CSS class and I want to make sure that whenever a h2 tag is assigned that class, additional CSS is given to the h2 tag on top of the original class. Here is what I currently have for CSS and HTML but it is currently not rendering out the text-align class.

.aligncenter {
 clear: both;
 color: #000000
 h2{
  text-align: center;
 }

<div>
<h2 class="aligncenter"> H2 Text that should be black and centered</h2>
</div>

score 2 · Accepted Answer · answered Aug 01 '18 at 01:52

2

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

answered Aug 01 '18 at 01:52

f-CJ

4,235
2
30
28

I am using SCSS and have been seeing something like this a bit in the code base but haven't been able to make it work myself – bbestul Aug 01 '18 at 02:32
Are you converting your scss files to css? – f-CJ Aug 01 '18 at 02:37
Yeah I am - using a sass compiler. I suppose thats where it begins to break down – bbestul Aug 01 '18 at 02:44

score 0 · Answer 2 · answered Aug 01 '18 at 02:29

0

.aligncenter {
 clear: both;
 color: #000000
 h2{
  text-align: center;
 }

<div>
<h2 class="aligncenter"> H2 Text that should be black and centered</h2>
</div>

answered Aug 01 '18 at 02:29

sushilyogi

31
2

score 0 · Answer 3 · answered Aug 01 '18 at 02:33

0

<style>
h2.aligncenter {
        clear: both;
        color: #000000;
        text-align: center;
        }
</style>

    <div><h2 class="aligncenter"> H2 Text that should be black and centered</h2></div>
 <!-- end snippet -->

answered Aug 01 '18 at 02:33

sushilyogi

31
2

CSS class nesting not working

3 Answers3

Linked