Assign a pair of CSS classes that each include the `filter` property to an HTML element

Is there a way to apply both aaa and bbb classes to an element simultaneously? I tried using class="aaa bbb" but it didn't work as expected. Any suggestions on how to achieve this?

<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>

Answer №1

.bbb filter takes precedence over .aaa filter. This is how the cascade in CSS operates, with later styles overriding earlier ones. If you wish to apply both filters, combine them within a single class:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to dynamically add or remove CSS classes to an element based on the selected radio button

Currently, I am attempting to utilize localstorage to save a class based on the selected radio button. Essentially, when the second radio button is clicked with the data-color attribute "color2", the goal is to apply that data as a class to the .box elemen ...

Retrieve a distinct HTML onclick event using VBA

I need some assistance because I have a major issue that I can’t solve or find help for online. Here is the code I am dealing with: <span class="test taLnk hvrIE6" onclick="ta.trackEventOnPage('Hotel_Review' ,'URL_HOTEL|text|2| ...

What is the best way to add animation to the hide/show function?

<div class="overlay"></div> CSS: .overlay::after { position: fixed; top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 100%; transit ...

Is it unwise to conceal the horizontal scrollbar?

My webpage includes a jquery slideshow using the jquery circle plugin, featuring the "shuffle" option. var slideshow = $('#slider').cycle({ fx: 'shuffle', shuffle: { top: 0, left: 1300}, .... When the images move out ...

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

Is it possible for me to delete data from localStorage using its key?

Currently, I am immersing myself in the world of HTML5. I have encountered a challenge while attempting to delete a single piece of data from localStorage. I am aware of the clear() method for removing all data, but is there a way to selectively remove d ...

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Fi ...

Showcasing only one item at a time in AngularJS 1.x with ng-repeat; by clicking on "next", the subsequent item will be displayed,

Currently, I am working on a quiz web application that requires displaying a total of 100 questions across 3 different tabs - Math, GK, and English. The questions are filtered using an Angular filter. However, I'm facing an issue where each tab is sho ...

Error: "Bootstrapsudio is experiencing a missing option in the col-md-

Recently, I was following a tutorial on Bootstrap Studio that showcased the design of a bakery named "Mom & Pop's Bakery". The tutorial highlighted how we could adjust the size of a column within a container by manipulating the column size on the righ ...

Display only the static placeholder in Angular 2 multi-select feature

My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...

Using jQuery functions to disable adding or removing classes with a click event

Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div? <div class="new-discussion small"> <a class="cancel">Cancel&l ...

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

Getting a jQuery alert on iOS devices: A step-by-step guide

The notification using <span class="close">&times;</span> functions perfectly on all desktop browsers, but unfortunately fails to trigger on mobile devices ... When attempting to view the page on an iPhone, the <span class="close">&am ...

Unable to eliminate the beforeunload event

The code below is used to display a default pop-up when the page is refreshed or closed: var myEvent = window.attachEvent || window.addEventListener; var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, ...

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

Finding the Location of the Parent Page within an iFrame

When attempting to retrieve the Parent screen position using the code below, I am consistently receiving a value of 0: window.parent.$(document).scrollTop() ...

Steps to customize a CSS file within node_modules

Is there a way to make changes to a CSS file in the "node_modules" dependency without them being overwritten when I run npm install? I want to keep the modifications I've made to the node module files. ...

What is the best way to include text in a Bootstrap 4 navbar?

I'm having an issue with the alignment of the username of the currently logged in user in my Bootstrap 4 navbar. It seems to be misaligned with the other elements on the page. Here is the code snippet: <nav class="navbar navbar-light bg-faded"> ...

CSS3 problem with using transparent PNGs as border images

Currently, I am implementing the border-image property using a PNG image that contains a transparent section. The issue arises when the background-color of the div is set to black. Upon applying the border-radius, the transparent section of the pattern dis ...

Unable to retrieve the parent element using jQuery

I am facing an issue with my html structure that is generated dynamically through a foreach loop. I have attempted to remove the entire <a> element by accessing it from its ACTIVE HYPERLINK. However, all my efforts seem to be in vain as I am unable t ...