Can CSS be used to eliminate shadows from a particular image?

Is it possible to eliminate the shadow from a specific image that is displayed multiple times on various pages of a website?

This particular image should not have any shadow.

Link to Image

The image can be found on pages like this one:

Page Link

Below is the code used to add shadows to other images across the site:

.alignnone {
        border: #b9b9b9 solid 1px;

      -webkit-box-shadow: 3px 3px 5px 6px #ccc;  
      -moz-box-shadow:    3px 3px 5px 6px #ccc; 
      box-shadow:         3px 3px 5px 6px #ccc;
    }

Answer №1

To select the image based on its src attribute, you can use the following CSS code:

img[src$="print.png"] { 
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
}

The "$=" selector targets any value that ends with the specified string.

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

Center the content within the div

Is there a way to center the content of the second column within this div? I've tried various methods without success so far. I'm currently using Bootstrap 4. Can anyone provide guidance on how to achieve this? <div class="card"> < ...

How come the dark grey in CSS appears to be lighter than the standard grey hue?

JSBIN DEMO Could this be a mistake or is it a bug? Shouldn't the dark gray shade be darker than the default grey one? HTML <div class="lightgrey">Light Grey</div> <div class="grey">Grey</div> <div class="darkgrey">Dar ...

What is the process for loading my new fonts into an HTML document?

I am trying to incorporate two specific fonts, bigsmalls-bold and lft-etica-web, into my CSS and HTML code. Unfortunately, I have been unable to find a way to download these fonts directly. The only information I found was a JavaScript code snippet on I a ...

"The Toggle Switch/checkbox on Proto.io is stuck and not toggling as

I'm currently struggling to make a toggle switch work on my webpage. Despite trying different approaches such as removing data or not applying it to the input element, the toggle still refuses to function properly. The data-field attribute is supposed ...

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...

How to trigger a JavaScript function using a button click

I've been struggling to figure out why my JavaScript code isn't functioning properly within Ionic. Can anyone guide me on how to store a number in a variable, display that variable, and increment it when a button is clicked? I have successfully ...

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link. Take a peek at what's inside my search.html: <input type="text" id="my-search-in ...

Changing an image into a background image

I currently have functional code that retrieves an image inside a div. However, upon checking it on mobile devices, the image appears too small. When I attempt to increase its height, it becomes disproportionate. As a solution, I am attempting to set the i ...

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

``What is the best way to adjust the layout of

I've been using the CSS code below to center items on my page: #MainBox { width: 488px; height: 181px; position: absolute; left: 50%; top: 236px; margin-left: -244px; //this being half the width } However, when viewing the pag ...

How do I go about uploading the code as instructed on the platform's e-commerce details page?

.mk_01{ color: #000000; font-size: 30px; font-style: normal; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; text-align: center; } .mk_02{ color: #000000; fon ...

Seating arrangement featuring wing-like extensions - back in business

Yesterday I had inquired about a solution for creating wing-like structures for a plane (for a seatmap). The question and its corresponding "solution" can be accessed here: Building a seatmap with kind of wings for the plane We received a solution, but no ...

Adjusting video size in carousel (Bootstrap 4.0)

My school project requires me to create a website with a video slider, and I decided to use Bootstrap 4.0 for this task. I have successfully implemented a template from Bootstrap, but I am facing an issue with the video not fitting properly within the slid ...

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

Tumblr post not automatically playing flash content

I am facing an issue with embedding a flash object on my tumblr blog (Billy's audio player) where I have to click a white play button for the object to work properly. This problem seems to occur specifically in Chrome and Edge browsers, as other websi ...

A guide on integrating mat-select into Angular input fields

I've been trying to implement a mat-select dropdown on my input field, but for some reason, when I click on the arrow, nothing happens and the list doesn't show up. Usually, with autocomplete, when a user starts typing, all the options are displ ...

Is it possible to store CSS and JS files within an Android app that utilizes a webview, similar to Phonegap

Looking to store CSS and JS files for an Android app that utilizes a webview. Want to avoid repeated server requests by storing the files locally on the phone, similar to how PhoneGap operates. Are there any resources or documentation available to help a ...

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

Ways to make an image wander aimlessly across a webpage while also spinning as it moves (with the help of jQuery or CSS)

I am working on making a div randomly move around a page. This is a related question Now, I have replaced the div with a picture like an "arrow" and I want it to randomly move while also pointing in the right direction by changing its rotation angle as i ...