feat(curriculum): add interactive examples to pseudo classes lesson (#62958)

curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-pseudo-classes
 ---
 
-# --description--
+# --interactive--
 
 Pseudo-classes are special CSS keywords that allow you to select an element based on its specific state or position. The element's state or position could include:
 
@@ -28,24 +28,46 @@ Let's see how you can use a pseudo-class to represent each of the states and pos
 
 The `:active` pseudo-class lets you select the active state of an element, like clicking on a button:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button>Example Button</button>
+```
+
 ```css
 button:active {
   background: greenyellow;
 }
 ```
 
+:::
+
 The `:hover` pseudo-class defines the hover state of an element. An example would be hovering over a button or link:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<a href="#">Hover over me!</a>  
+```
+
 ```css
 a:hover {
   text-decoration: none;
+  color: white;
   background: crimson;
 }
 ```
 
-The `:first-child` pseudo-class selects an element that is the first child of its parent element. Here's an HTML example showing a `div` element containing multiple paragraph elements:
+:::
+
+The `:first-child` pseudo-class selects an element that is the first child of its parent element. Here's an example of targeting the first paragraph element in a `div` container:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <div class="container">
   <p>first child</p>
   <p>second child</p>
@@ -54,8 +76,6 @@ The `:first-child` pseudo-class selects an element that is the first child of it
 </div>
 ```
 
-Here's the CSS that selects the first paragraph element in that `div` container: 
-
 ```css
 .container p:first-child {
   background: lightcoral;
@@ -63,10 +83,24 @@ Here's the CSS that selects the first paragraph element in that `div` container:
 }
 ```
 
+:::
+
 The first paragraph element in that `div` will receive the `lightcoral` background color and `padding` of `0.4rem` on all four sides. 
 
 The `:last-child` pseudo-class targets the last element that is the child of its parent. Here is an example of targeting the last paragraph element in the container `div` element:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<div class="container">
+  <p>first child</p>
+  <p>second child</p>
+  <p>third child</p>
+  <p>last child</p>
+</div>
+```
+
 ```css
 .container p:last-child {
   background: lightcoral;
@@ -74,22 +108,42 @@ The `:last-child` pseudo-class targets the last element that is the child of its
 }
 ```
 
+:::
+
 The `:visited` pseudo-class lets you style a link the user has already visited:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<a href="https://www.example.com">Visit Example.com</a>
+```
+
 ```css
 a:visited {
   color: purple;
 }
 ```
 
+:::
+
 The `:disabled` pseudo-class lets you style an interactive element in disabled mode:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button disabled>Disabled Button</button>
+```
+
 ```css
 button:disabled {
   background-color: lightgray;  
 }
 ```
 
+:::
+
 As you can see, pseudo-classes let you style elements based on user interactions, like hovering or visiting a link. This makes your website feel more interactive.
 
 Apart from the pseudo-classes already mentioned, there are others like: