Sorry for being a CSS noob but I was hoping I could ask the best way to add a CSS hover effect for changing color on longer classes.

For example

    header.header-div.top-nav1.nav-div.nav-without-login-div.ullist-inline li .btn- 
       custom-rounded.btn-login {
       background: #fff !important;
       color: #ff771e  !important;
       border: 1px solid #ff771e  !important;
       text-transform: initial;
    }

Normally when doing smaller project I would just do

:hover {}

Then change the background color or something but I was hoping to ask experienced front end devs what they would do.

CodePudding user response：

You can use :hover on any selector, no matter how long it is.

CodePudding user response：

firstly if you want to add a hover on an element you do not need to start writing classes from the start like you have written around 7-10 classes. instead give it an id and keep your css concise and easy to read for the other devs!

and as told before by a few it doesn't matter how long your selector is just put :hover{} at the end and you will be good to go but since you asked so yeah i would rather give it an id or incase you aren't comfortable with using id then give it a unique class name and just use that as a selector instead of this long syntax!

Hope this was helpful!