Hola,
Tengo este marcado:
<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>Solo quiero usuarios que tengan los mismos datos de habitación que el padre div, así que escribí este css:
span { display: none; } [data-users="room2"] [data-room*="room2"] { display: block; }violín: https://jsfiddle.net/ehpt9f5z/2/
Sin embargo, dado que los datos en el padre div pueden cambiar a cualquier número de habitación, necesito una variable allí para que el selector de CSS siempre haga coincidir los datos de la habitación del niño con su padre, algo como esto:
[data-users=$1] [data-room*=$1] { display: block; }¿Es incluso posible con CSS puro?
Gracias.
Esto no se puede lograr solo con CSS, ya que no hay un selector principal de CSS.
Una solución de JavaScript sería recorrer cada div que tiene el atributo data-users , luego recorrer cada elemento secundario del div y mostrar aquellos cuyo atributo data-room contiene el valor del atributo data-users .
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>