CODEWITHSUNDEEP
css
Bodi
Bodi

Reputation: 271

CSS shorthand possible?

Do you know if there's a way to combine this CSS?

.a:hover .RemoveImg, .b:hover .RemoveImg, .c:hover .RemoveImg {
    display: inline;
}

I'm thinking it should be the below, but it doesn't work.

.a:hover, .b:hover, .c:hover .RemoveImg 
    display: inline;
}

My desired outcome is whenever a, b, or c is hovered, the RemoveImg class that is within each of those separate classes will be displayed.

Thanks.

Upvotes: 0

Views: 43

Answers (1)

Terry
Terry

Reputation: 66228

There are no shorthands available or CSS selectors: only property and property values. However, you can look into using a CSS pre-processing language like SASS to do the work for you, but which requires compiling to generate a CSS file later.

The the SCSS/SASS syntax, it would be something like this:

.a, .b, .c {
    &:hover .RemoveImg {
        display: inline;
    }
}

... which will compile into the selector combination you desire:

.a:hover .RemoveImg, .b:hover .RemoveImg, .c:hover .RemoveImg {
    display: inline;
}

Upvotes: 2

Related Questions