Apply two CSS classes which contain `filter` to an HTML element

Question

For example, I want to apply both aaa and bbb to an element, but it seems that only one works at a time. class="aaa bbb" did not work. How to do it?

<html>
    <head>
        <style>
        .aaa
        {
            filter: drop-shadow(10px 10px 10px black);
        }

        .bbb
        {
            filter: grayscale(100%);
        }
        </style>
    </head>
<body>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
        class="aaa bbb"
        style="margin:40px" />
</body>
</html>

only one filter css property can be applied so if you want to do both drop-shadow and grayscale it needs to be on the same filter rule: filter: drop-shadow(10px 10px 10px black) grayscale(100%) — Bart, Aug 24 '19 at 14:49
I need both `aaa` and `aaa` + `bbb` (but not `bbb` alone). Is there any way to make `bbb` inherit `aaa`? Or do I have to add `aaa`'s part to `bbb` manually? — Damn Vegetables, Aug 24 '19 at 14:52
unfortunately there is no way for it to inherit in the way you want and you will need to copy to bbb to include the full filter — Bart, Aug 24 '19 at 14:57

score 1 · Accepted Answer · answered Aug 24 '19 at 14:50

1

.bbb filter override .aaa filter. This is the way CSS works, it's override precedent attributes. If you want to apply both filter, use one class with:

.aaa {
    filter: grayscale(100%) drop-shadow(10px 10px 10px black);
}

answered Aug 24 '19 at 14:50

ManUtopiK

4,495
3
38
52

Apply two CSS classes which contain `filter` to an HTML element

1 Answers1