From 51af1e6e983f1a2835f050f1510ab840b6f0bee4 Mon Sep 17 00:00:00 2001
From: Diem-Trang Pham <6422507+pdtrang@users.noreply.github.com>
Date: Fri, 24 Oct 2025 04:13:36 -0500
Subject: [PATCH] feat(curriculum): add interactive examples Location
Pseudo-classes lesson (#62986)
---
.../672bbeaa5afdc5a98d5ab8ff.md | 38 +++++++++++++++++--
1 file changed, 34 insertions(+), 4 deletions(-)
diff --git a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md
index 340c2cb845d..d5289ea7eca 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbeaa5afdc5a98d5ab8ff.md
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-are-examples-of-location-pseudo-classes
---
-# --description--
+# --interactive--
Location pseudo-classes are used for styling links and elements that are targeted within the current document. They offer a way to apply styles based on whether a link is visited or whether an element is currently in focus.
@@ -22,41 +22,71 @@ Let's take a deeper look at each of these pseudo-classes.
The `:link` pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them. For example, you might want to make all unvisited links blue or your website's primary color:
+:::interactive_editor
+
+```html
+
+Visit Example.com
+```
+
```css
a:link {
color: magenta;
}
```
+:::
+
In this case, any link the user hasn't clicked yet will appear magenta. Once the user clicks the link, the `:link` style no longer applies, and the `:visited` pseudo-class takes over. The `:visited` pseudo-class comes into play after the user clicks the link, so you can use it to target links the user has already clicked.
Here is an example of changing the visited link state to the color `purple`:
+:::interactive_editor
+
+```html
+
+Visit Example.com
+```
+
```css
a:visited {
color: purple;
}
```
+:::
+
The `:visited` pseudo-class helps users distinguish between links they have visited and those they have not.
The `:any-link` pseudo-class is a combination of the `:link` and `:visited` pseudo-classes. So it matches any anchor element with an `href` attribute, regardless of whether it's visited or not.
Here is an example of changing the link color for the `:any-link` pseudo-class to `crimson`:
+:::interactive_editor
+
+```html
+
+Visit Example.com
+```
+
```css
a:any-link {
color: crimson;
}
```
+:::
+
The `:local-link` pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones. Currently, no browser supports the `:local-link` pseudo-class.
The `:target` pseudo-class selects an element that matches the current URL fragment identifier, for example, `#section1`. It's very useful for pages with in-page navigation.
-Here's an HTML example that represents an in-page navigation:
+Here's an HTML example that represents an in-page navigation. The CSS uses the `:target` pseudo-class to style the section that matches where the user navigates to:
+
+:::interactive_editor
```html
+