Target data in a <div> tag with CSS

Question

I am trying to do it <div>with a lower height, and data-image-src - in shades of gray until it is pressed, after which it will restore all the height and color.

As I set up my jQuery parallax, the background image is set in the data-src file, and I'm not sure how to set it up with CSS to make sure it gets filter: grayscale(100%).

This is how HTMl is configured

<div class="parallaxmenu" id="parallax-4" data-parallax="scroll" data-image-src="../pictures/drinks.png">

And I'm trying to target data-image-src="(Image)"

Is there a way to do this or will I have to configure jQuery differently?

Answer 1

div[data-image-src] div div[data-image-src="(Image)"] div .

Answer 2

, @zgood , , Javascript:

var x = document.getElementById("parallax-4").getAttribute("data-image-src");
console.log(x);

<div class="parallaxmenu" id="parallax-4" data-parallax="scroll" data-image-src="../pictures/drinks.png">