Insert CSS Class inside a css class

Question

What I want is like this code:

class1:hover {
    background-color: #f9f9f9;
    box-shadow: 1px 1px 8px #E0DADF;

    class2 {
        opacity:0.5;
    }
}

Is this even possible or there is any other way to make it like this?

What are you looking to accomplish by nesting? And no, plain CSS can't do this. — j08691
– j08691, Commented Sep 11, 2012 at 3:01
@KevinSteveManingo - Is class2 located within class1 in the DOM? — Joseph Silber
– Joseph Silber, Commented Sep 11, 2012 at 3:05

Joseph Silber · Accepted Answer · 2012-09-11 03:03:38Z

1

.class1:hover {
    background-color: #f9f9f9;
    box-shadow: 1px 1px 8px #E0DADF;
}

.class1:hover .class2 {
    opacity: 0.5;
}

answered Sep 11, 2012 at 3:03

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pdoherty926 · Accepted Answer · 2012-09-11 03:02:30Z

0

You'll need to use SASS or LESS.

answered Sep 11, 2012 at 3:02

pdoherty926

10.6k5 gold badges47 silver badges75 bronze badges

Praveen Kumar Purushothaman · Accepted Answer · 2012-09-11 03:03:43Z

0

In case of SASS, or SCSS, yeah this is possible. But if you want to nest the CSS Classes, you can do this way:

class1:hover{
    background-color:#f9f9f9;
    box-shadow: 1px 1px 8px #E0DADF;
}

class1:hover class2{
    opacity:0.5;
}

answered Sep 11, 2012 at 3:03

167k27 gold badges215 silver badges261 bronze badges

Russell Gutierrez · Accepted Answer · 2012-09-11 03:07:04Z

0

Just to add something. What you can also do, is make the element have multiple classes. For example,

<div class="class1 class2"></div>
<div class="class2"></div>

The first div element would also have the css styles of the second.

answered Sep 11, 2012 at 3:07

Russell Gutierrez

1,3958 silver badges19 bronze badges