Apply some style to specific element with Javascript or CSS

Question

I have a very strange situation where I have style that apply grayscale to the whole HTML document. That’s all ok but now my images obvious have grayscale filter which I don’t want. What am trying to achieve is that images don’t have that grayscale filter but whole HTML needs to stay as it is.

<!DOCTYPE html>

<html lang="en" style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;;;-webkit-filter:grayscale(1);-moz-filter:grayscale(1);-ms-filter:grayscale(1);filter:grayscale(1);;">
<head>

    </head>
    <body tyle="webkit-filter:grayscale(1);" >
      <p style="background-color:#000!important;;;;color:#fff!important;border-color:#fff!important;opacity:1!important;;">
      This is text
      </p>
      <img class="img-fluid" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg" >  

    </body>
</html>

Also here is jsfiddle link: https://jsfiddle.net/y2xamkwe/

Can I do it with Javascript or with CSS?.

My CSS is like this

html .img-fluid {
    filter:none!important
}

What role that images will play? Is there a way to replace them from main content to outer block and give them absolute position? In that case you could grayscale all content inside the main-content block, without affecting images... — OPTIMUS PRIME
– OPTIMUS PRIME, Commented Nov 27, 2019 at 13:16

CeesJanNolen · Accepted Answer · 2019-11-27 13:21:35Z

4

When using the following code to apply the style to all the items in the body element except the exclude classes will fix this problem for you.

<style>
    body :not(.exclude) {
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        filter: grayscale(1);
</style>

Then you can add an extra class to your image tag like so:

<img class="img-fluid exclude" src="https://blackrockdigital.github.io/startbootstrap-agency/img/portfolio/01-thumbnail.jpg"/>

I hope this helps solving your problem.

answered Nov 27, 2019 at 13:21

CeesJanNolen

761 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Enrico Cortinovis · Accepted Answer · 2019-11-27 13:05:29Z

1

You can do this using the class attribute. To understand how it works, here is an example. You will need CSS to do it:

<html>
   <head>
   <style>
   h1.notimportant {
       color: blue;
   }

   p.important {
       color: green;
   }
   </style>
   </head>
   <body>

   <h1 class="notimportant">Header 1</h1>
   <p>Just a normal paragraph</p>
   <p class="important">This paragraph is more important</p>

   </body>
</html>

Hope this helped!

answered Nov 27, 2019 at 13:05

Enrico Cortinovis

8913 gold badges11 silver badges35 bronze badges

Comments

gulyasfeccferenc · Accepted Answer · 2019-11-27 13:11:25Z

1

One approach could be (apart from not using !important everywhere, it is just not good practice) is to list all your element you want to grayscale, either by use a CSS targeting all your element needs be grayed out, or create a CSS class containing this filter option. As you applied the filter on HTML and BODY, you can't make the related images not filtered as they contained by the forementioned tags, meaning they will be filtered as well.

answered Nov 27, 2019 at 13:11

gulyasfeccferenc

3645 silver badges13 bronze badges

Comments

Armedin Kuka · Accepted Answer · 2019-11-27 13:13:53Z

1

I would recommend you to remove all the inline style, especially on the html tag. Instead, you can use make use of :after and :before to make it more efficient. Here is an example of what you might want to do.

body:before {
  content: '';
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;

}

answered Nov 27, 2019 at 13:13

Armedin Kuka

6754 silver badges10 bronze badges

Collectives™ on Stack Overflow

Apply some style to specific element with Javascript or CSS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related