css-challenges

← overzicht

---

CSS challenge 9: :has()

🗓️ ⸺ Dinsdag 4 februari
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ even aanmelden - max 24

📗 ⸺ :has() intro (pdf)

---

Samples

🎯 ⸺ :has() basics (CodePen 🎠)
🎯 ⸺ :has() broertjes (CodePen 🎠)
🎯 ⸺ :has() controls (CodePen 🎠)

---

Oefening 1: 🎉 :has() warm-up

📊 ⸺ 🟦 🟥 ⬛️

Maak de blokes na. Tot sommetje 9 goed te doen, daarna lastiger.

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

---

Oefening 2: 🏷️ :has() cards

📊 ⸺ 🟥 ⬛️

Pas de layout (en uiterlijk) van de cards (articles) aan afhankelijk van welke content de card bevat.

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

---

Oefening 3: 🔍 :has() magnify

📊 ⸺ 🟥 ⬛️

• Maak de li met hover of focus groter
• Maak de li voor en na die li ook iets groter
• Maak de li’s voor en na die li’s ook ietsje groter

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

---

Oefening 4: 🔍 :has() lightdark (met @supports)

📊 ⸺ 🟥 ⬛️

• Een licht en donker thema met :has(), color-scheme en light-dark()
• Gebruik @supports of te controleren of de browser light-dark() ondersteund

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld/Uitwerking (CodePen)

---

Links

🎯 ⸺ :has() (Jen Simmons 🦹‍♀️)

This site is open source. Improve this page.