Suponer
<div myattr='user1'>abcd</div> <div myattr='user2'>1234</div> <div myattr='user2'>wxyz</div> <div myattr='user3'>7890</div>Por ahora, la visualización del tercer elemento debe ser ninguno.
Lo intenté
div[myattr='user2'] ~ div[myattr='user2'] { display: none; } Pero este código solo funciona para el elemento cuyo myattr es user2 , no para otros usuarios/valores de atributo y esto establece la visualización del tercer elemento en ninguno en lugar del segundo.
Quiero establecer algunos estilos para cada elemento cuyo siguiente elemento tenga el mismo atributo.
¿Cómo puedo conseguir esto?
Se prefiere el código CSS, pero JavaScript también puede funcionar aquí.
Debido a que desea volver a consultar el valor del atributo del elemento anterior, no creo que pueda hacer esto con CSS. Es bastante sencillo con JavaScript:
for (const entry of document.querySelectorAll("[data-myattr]")) { const next = entry.nextElementSibling; if (next.getAttribute("data-myattr") === entry.getAttribute("data-myattr")) { entry.classList.add("hidden"); } }Ejemplo en vivo:
const display = document.getElementById("display"); display.textContent = "Before"; setTimeout(() => { for (const entry of document.querySelectorAll("[data-myattr]")) { const next = entry.nextElementSibling; if (next.getAttribute("data-myattr") === entry.getAttribute("data-myattr")) { entry.classList.add("hidden"); } } display.textContent = "After"; }, 1000); .hidden { display: none; } <div id="display"></div> <hr> <div data-myattr='user1'>first user1</div> <div data-myattr='user2'>first user2</div> <div data-myattr='user2'>second user2</div> <div data-myattr='user3'>first user3</div> <hr> <div data-myattr='user1'>first user1</div> <div data-myattr='user2'>first user2</div> <div data-myattr='user3'>first user3</div> <div data-myattr='user3'>second user3</div> <div data-myattr='user3'>third user3</div> <hr> <div data-myattr='user1'>first user1</div> <div data-myattr='user2'>first user2</div> <div data-myattr='user3'>first user3</div> <div data-myattr='user2'>second user2 but not in a row</div> <div data-myattr='user3'>second user3 but not in a row</div> Nota al margen: he usado data-myattr en lugar de myattr arriba porque los atributos personalizados siempre deben usar el prefijo data- .