In my CSS, I have the following:
.map-menu .category.selected {
background-image: url("../img/category-selected.png");
}
However, I am trying to apply this style to elements with certain data attributes. For example, I can target a CSS element for a specific data attribute like this:
[data-id='1'] {
width: 400px;
}
I'm struggling to figure out how to target both the category in the CSS and the data attribute together. I tried combining them like this, but it's not working:
.map-menu .category.selected [data-id='1'] {
background-image: url("../img/category-selected1.png");
}
Can anyone provide guidance on how to achieve this? I don't have much experience with data attributes.
Here is an example of the HTML structure where this styling should be applied:
<div class="category selected" data-id="1">Art Galleries</div>
UPDATE: I managed to solve this by being more specific with my selector:
div.selected[data-id='5'] {
background-image: url("../img/category-selected.png") !important;
}