The attribute selector is malfunctioning

Currently, I am attempting to target img tags based on the alt attribute in order to correctly load a background-image on mobile devices.

The issue I am encountering is that regardless of the combination of attribute selectors I use, it does not seem to work. I am unable to select the specific tag I intend to with these selectors.

I have tried the following:

img[alt="Chelo Kebab"] {opacity: 0.5}
img[alt*="Chelo Kebab"] {opacity: 0.5}
img[alt^="Chelo Kebab"] {opacity: 0.5}

I have experimented with all possible combinations, including variations in capitalization. Additionally, I attempted:

img[alt] {opacity: 0.5}

Yet, unfortunately, none of these methods have been successful for me. I even tried adding the parent class name before img.

You can view the code I am working on at this address: here

My objective is to target each individual img tag.

Here is evidence that my syntax is accurate: https://i.sstatic.net/VJvFB.png

UPDATE: It has become clear that this is a caching problem that I am currently working to resolve.

imagecsscss-selectorsselector

Answer №1

Using attribute-selectors for images in CSS is perfectly fine:

img[alt="xyz"] {
  opacity: 0.7 !important;
}
img[alt="123"] {
  opacity: 0.4 !important;
}
img[alt="456"] {
  opacity: 0.2 !important;
}
img[alt] {
  opacity: 0.1;
}
<img src="https://example.com/image.jpg" /><br />
<img alt="xyz" src="https://example.com/image.jpg" /><br />
<img alt="123" src="https://example.com/image.jpg" /><br />
<img alt="456" src="https://example.com/image.jpg" /><br />

It's important to note that when using a more general selector like img[alt], it may be necessary to use the !important declaration to ensure your specific opacity settings are applied correctly.

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

Switching the background image of a div by clicking on a different div

To start, you can locate all of my code right here. http://jsfiddle.net/yfukm8kh/1/ The issue I'm encountering pertains to the following section. var changePic = function (direction, id, array) { var intID = parseInt(id); var intDir = pars ...

jqueryhtmlcssbackground-image

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

javascriptjqueryhtmlcss

Emphasize the current page's menu item for the user viewing it

I'm looking for a way to visually emphasize the current menu item so that users can easily identify the page they are currently on. This could be achieved through bolding or underlining, whichever works best. I'm hoping to accomplish this using o ...

csswordpress

block height has become a constant challenge for me - despite my various attempts, I still cannot seem

Struggling with adjusting the height of my posts. Any help would be appreciated! For more details, please visit: <li> <div class="thumb-img"> <a title="Hiring a Professional Designer for Your Kitchen" href="http://www.mulberrydesignerkitc ...

htmlcss

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Currently, I am working on creating a navigation bar using React. This navigation bar consists of multiple navigation items. The requirement is that when a user clicks on a particular navigation item, the class 'active' should be applied to that ...

javascriptjquerycssreactjs

Display all attribute connections for a product in Prestashop

I have updated the products in my shop to include different combinations. These combinations involve a 'packaging' attribute with two options: a 100 units box and a 200 units box, each with its own unique reference number. On the product page, t ...

phphtmlcssprestashop

Why is my Bootstrap table failing to be responsive?

I'm currently using Bootstrap 4 to incorporate a table into my website and encountering difficulties in making it responsive on mobile phones. Unfortunately, when viewing the table on a phone, it appears very zoomed out and not user-friendly. Can anyo ...

csstwitter-bootstrapbootstrap-4

What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the s ...

htmlcss

Display new information within a div element seamlessly without refreshing the page

Just a heads-up, I'm new to HTML development... Currently working on a website using Bootstrap. There are some buttons on the left side shown in the screenshot, and my goal is to update the content on the right without having to reload the entire pag ...

javascripthtmlcsstwitter-bootstrap

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

javascripthtmlcssreactjsmaterial-ui

Choosing between xpath and css using parameters within data-bind

I am attempting to choose a radio button element inside a window using the corresponding label O id O test Attempting to select the radio button for 'id' by providing 'id' as a parameter in the xpath or css selector Attempted //span ...

selenium-webdriverxpathcss-selectors

Set the first link in a menu to be highlighted as active using jquery

In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link ...

jqueryhtmlcss

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

htmlcssreactjsmaterial-uiuitextfield

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Exploring the potential synergy between the compass and blessings

Currently working on a Compass project and facing the issue of my final CSS output being too large, requiring it to be blessed. I am using Codekit to compile SCSS files but unfortunately, the bless option is not available for Compass projects as mentioned ...

cssnode.jscompass-sass

Develop adaptable flex items

I am working with a container element that contains variable child elements whose width I want to scale. To see an example of what I'm trying to achieve, take a look at this simple plunker: https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview When ...

htmlcssflexboxalignment

Is there a way to prevent inheriting width properties? Or perhaps how can one revert back to the original width value

After installing the Thank you plugin, I noticed that the button on my test site appears to be strange. Upon further investigation, I discovered that it is inheriting #commentform textarea { width: 45%; } from my theme. While removing the width in the CSS ...

cssinheritance

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

javascriptjqueryhtmlcssanimation