feat(curriculum): Add interactive examples to Functional Pseudo-classes lesson (#62997)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-examples-of-functional-pseudo-classes
 ---
 
-# --description--
+# --interactive--
 
 Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state, for example, `:hover`, `:focus`, functional pseudo-classes accept arguments within parentheses, hence the name "functional pseudo-classes".
 
@@ -18,17 +18,18 @@ Examples of functional pseudo-classes are:
 
 Let's take a deeper look at each of these functional pseudo-classes with examples.
 
-The `:is()` pseudo-class is useful when you want to style a group of elements that share some, but not all, characteristics. For example, you might want to style different types of buttons on your website, including `button` elements, links styled as buttons, and `input` elements with types `submit` and `reset`. Here's an HTML example representing that:
+The `:is()` pseudo-class is useful when you want to style a group of elements that share some, but not all, characteristics. For example, you might want to style different types of buttons on your website, including `button` elements, links styled as buttons, and `input` elements with types `submit` and `reset`. Here's an example representing that. Without the `:is()` function, you would have to write a complex selector like this:
+
+:::interactive_editor
 
 ```html
-<button>Click Me</button>
-<a href="#" class="button">Click Me Too</a>
+<link rel="stylesheet" href="styles.css" />
+<button>Example Button</button>
+<a href="#" class="button">Link styled like a button</a>
 <input type="submit" value="Submit" />
 <input type="reset" value="Reset" />
 ```
 
-Without the `:is()` function, you would have to write a complex selector like this:
-
 ```css
 button,
 a.button,
@@ -51,13 +52,25 @@ button:hover,
 a.button:hover,
 input[type='submit']:hover,
 input[type='reset']:hover {
-  background-color: lightblue;
-  border-color: lightblue;
+  background-color: blue;
+  border-color: blue;
 }
 ```
 
+:::
+
 With the `:is()` function, you can write a more compact and understandable selector like this:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button>Example Button</button>
+<a href="#" class="button">Link styled like a button</a>
+<input type="submit" value="Submit" />
+<input type="reset" value="Reset" />
+```
+
 ```css
 :is(button, a.button, input[type='submit'], input[type='reset']) {
   background-color: darkblue;
@@ -79,17 +92,24 @@ With the `:is()` function, you can write a more compact and understandable selec
 }
 ```
 
+:::
+
 The `:where()` pseudo-class functions similarly to `:is()`, but it doesn't increase the specificity of your selectors. This makes it ideal for applying styles without affecting the specificity of other rules.
 
-For example, you can use the `:where()` function to apply zero `margin` and `padding` to heading elements. This ensures that the reset won't interfere with more specific styles you might apply later. Here's the HTML for that:
+For example, you can use the `:where()` function to apply zero `margin` and `padding` to heading elements. This ensures that the reset won't interfere with more specific styles you might apply later. Here's an example for that:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <h1>Page Title</h1>
 <h2>Subtitle</h2>
 <h3>A point</h3>
-```
 
-And this is the CSS:
+<p>Example paragraph.</p>
+<p>Example paragraph.</p>
+<p>Example paragraph.</p>
+```
 
 ```css
 :where(h1, h2, h3) {
@@ -98,19 +118,16 @@ And this is the CSS:
 }
 ```
 
+:::
+
 Styling a parent element based on its children's states was previously challenging until the `:has()` pseudo-class was introduced. It allows you to apply styles to a parent element based on the presence or state of its child elements.
 
 For example, the CSS below will only apply to any `article` element that has an `h2` in it:
 
-```css
-article:has(h2) {
-  border: 2px solid hotpink;
-}
-```
-
-Here's the HTML for that:
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <article>
   <h2>Subheading</h2>
   <p>Lorem ipsum dolor sit amet.</p>
@@ -123,8 +140,25 @@ Here's the HTML for that:
 </article>
 ```
 
+```css
+article:has(h2) {
+  border: 2px solid hotpink;
+}
+```
+
+:::
+
 The `:not()` pseudo-class is ideal for situations where you want to apply styles to a group of elements, excluding one or more specific exceptions. In the CSS below, any button that is not a primary button will have a grey background:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button class="primary">Primary Button</button>
+<button class="secondary">Secondary Button</button>
+<button class="danger">Another Secondary Button</button>
+```
+
 ```css
 button {
   padding: 10px 20px;
@@ -144,13 +178,7 @@ button:not(.primary) {
 }
 ```
 
-Here's the HTML for the buttons:
-
-```html
-<button class="primary">Primary Button</button>
-<button class="secondary">Secondary Button</button>
-<button class="danger">Another Secondary Button</button>
-```
+:::
 
 # --questions--