CODEWITHSUNDEEP
htmlcss
Aspid
Aspid

Reputation: 113

how to apply the same rules to several selectors in CSS

I have a container with a hamburger. This changes the color when hovering the container. Which one is the right way to write this in just one line of code: .hamburger-box:hover .hamburger-inner{background:red;} .hamburger-box:hover .hamburger-inner:before{background:red;} .hamburger-box:hover .hamburger-inner:after{background:red;}

I already tried many possibilities. I guess is a very simple answer but i don't know it. 

.hamburger-box{position:relative; display:inline-block; width:120px;height:24px}
.hamburger-inner{top:50%; display:block; margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute; width:100%; height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:lightgray}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}
.hamburger-inner:before{top:-10px}
.hamburger-inner:after{bottom:-10px}
.hamburger-box:hover .hamburger-inner{background:red;}
.hamburger-box:hover .hamburger-inner:before{background:red;}
.hamburger-box:hover .hamburger-inner:after{background:red;}
<div class="hamburger-box">
          <div class="hamburger-inner"></div>
        </div>

Upvotes: 2

Views: 39

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3466

You simply need to list your selectors, separated by comma ,:

.hamburger-box:hover .hamburger-inner, 
.hamburger-box:hover .hamburger-inner:before, 
.hamburger-box:hover .hamburger-inner:after {
  background:red;
}

Upvotes: 1

Related Questions