Have you ever wanted to exclude a single image or more from some CSS rules that apply to all images? For example, say you have the CSS shadow rule for all your WordPress images and you want to remove this option for a single image. Nothing could be simpler. Follow the step by step guide below.

• STEP 1

Please Support My work by Making a Donation.

• STEP 2

You need to Download and Activate a plugin that will allow you to know the IDs of your images. To do this, I have used Show IDs plugin. Go to Plugins / Add new and search for Show IDs. Once you have downloaded and activated the plugin, follow STEP 3 below.

• STEP 3

Go to Media / Library. As you can see in the image below, you will find the IDs of your images at the top right.

• STEP 4

Once you get hold of the image ID, just go to Appearance / Customize / Additional CSS – enter the code below, being careful to change the code .wp-image- followed by the ID “10704” with the ID of your image in question. The “none” rules apply to the shadow code in my specific case, but you may have a different code for your various CSS rules. You just need to add “none”and the ID image in question.

.post .wp-image-10704 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
}

Note: .post in the code above refers to the images in posts. You can substitute it with .page to exclude CSS rules for specific images from pages.

This post was updated on Saturday / August 1st, 2020 at 11:14 PM