From 5c116f0972c302c2e6087441d3613f5ede6c18df Mon Sep 17 00:00:00 2001
From: Ariz Faiyaz <arizfaiyazwork@gmail.com>
Date: Wed, 15 Oct 2025 05:55:45 +0530
Subject: [PATCH] feat(curriculum): Add interactive examples to id selectors
 lesson (#62797)

---
 .../672b8ea434ceac23cc90f337.md                     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md
index bc05718f85b..bedc5854c14 100644
--- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md
+++ b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8ea434ceac23cc90f337.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-specificity-for-id-selectors
 ---
 
-# --description--
+# --interactive--
 
 ID selectors are among the most powerful selectors in CSS, allowing developers to apply styles to specific elements with unique identifiers.
 
@@ -15,12 +15,23 @@ ID selectors are defined by a hash symbol (`#`) followed by the ID name. They sh
 
 Here is an example using an ID selector:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p id="unique">Example paragraph</p>
+<p>Another paragraph</p>
+<p>Yet another paragraph</p>
+```
+
 ```css
 #unique {
   color: purple;
 }
 ```
 
+:::
+
 In this example, the element with the ID `unique` will have its text color set to `purple`.
 
 ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is `(0, 1, 0, 0)`.