Quantity query avec :has()
HTML
index.html <article>
<span class="message"></span>
<section>
<span>🍔</span>
</section>
<button onclick="deleteBurger(this)">Delete</button>
<button onclick="addBurger(this)">Add</button>
</article>
CSS
style.css @layer demo {
article {
--state-color: green;
--text: "C'est ok 😀";
border: var(--state-color) 1px solid;
background-image: linear-gradient(45deg, black, #222);
padding: 2rem 4rem;
border-radius: 20px;
font-size: 4rem;
text-align: center;
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
.message {
font-size: 2rem;
color: var(--state-color);
&::before {
content: var(--text);
}
}
&:has(section:empty) {
--state-color: yellow;
--text: "Team pizza ? 🍕";
}
&:has(section > span:nth-child(3n)) {
--state-color: orange;
--text: "Trop de burgers 😧";
}
&:has(section > span:nth-child(6n)) {
--state-color: red;
--text: "là c'est abusé 😱";
}
}
}
@layer demoStyles {
body {
height: 100svh;
}
button {
--bgc-btn: var(--w, white);
--bgc-btn-hv: var(--bl3, #66a1ff);
--c-btn: var(--bk, black);
--p-btn: calc(var(--p, 1rem) - 2px) var(--p2, 2rem);
--fs-btn: 1.1rem;
background: var(--bgc-btn);
border: 0;
color: var(--c-btn);
padding: var(--p-btn);
border-radius: var(--rounded, 100vmax);
font-size: var(--fs-btn);
place-items: center;
gap: 0.5rem;
width: fit-content;
font-weight: 600;
line-height: 1;
transition: background-color 0.3s linear, color 0.3s linear;
display: inline-flex;
&:hover {
background: var(--bgc-btn-hv);
}
}
}
JavaScript
script.js function addBurger(button) {
const section = button.closest("article").querySelector("section");
section.innerHTML = `${section.innerHTML}<span>🍔</span>`;
}
function deleteBurger(button) {
const article = button.closest("article");
const spans = article.querySelectorAll("section > span");
if(spans.length > 1) {
const lastBurger = article.querySelector("section > span:last-child");
lastBurger.remove();
}
if(spans.length === 1) {
article.querySelector("section").innerHTML = '';
}
}