Hi,
I have this markup:
<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>
I want only users that have the same room data as the div parent so I wrote this css:
span { display: none; }
[data-users="room2"] [data-room*="room2"] { display: block; }
fiddle: https://jsfiddle.net/ehpt9f5z/2/
However, since the data in the div parent can change to any room number I need a variable there so the CSS selector will always match the room data from the child with its parent, something like this:
[data-users=$1] [data-room*=$1] { display: block; }
Is it even possible with pure css?
Thank you.
This is not accomplishable with CSS alone, since there is no CSS parent selector.
A JavaScript solution would be to loop through each div which has the data-users attribute, then loop through each child of the div and show the ones whose data-room attribute contains the data-users attribute value.
const divs = document.querySelectorAll('div[data-users]')
divs.forEach(e => [...e.children].forEach(f => {
if(f.dataset.room.split(',').includes(e.dataset.users)){
f.style.display = "block"
}
}))span { display: none; }<div data-users="room2">
<span data-room="room1,room2,room3">john</span>
<span data-room="room1">george</span>
<span data-room="room2">jane</span>
</div>