diff --git a/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md b/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md
index 1453fc5c0bf..d453ac07e89 100644
--- a/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md
+++ b/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md
@@ -5,12 +5,20 @@ challengeType: 31
dashedName: review-css-attribute-selectors
---
-# --description--
+# --interactive--
## Working with Different Attribute Selectors and Links
- **Definition**: The `attribute` selector allows you to target HTML elements based on their attributes like the `href` or `title` attributes.
+:::interactive_editor
+
+```html
+
+Link with href
+No href
+```
+
```css
a[href] {
color: blue;
@@ -18,8 +26,18 @@ a[href] {
}
```
+:::
+
- **`title` Attribute**: This attribute provides additional information about an element. Here is how you can target links with the `title` attribute:
+:::interactive_editor
+
+```html
+
+Link with title
+Normal link
+```
+
```css
a[title] {
font-weight: bold;
@@ -27,16 +45,36 @@ a[title] {
}
```
+:::
+
- **Combine selectors to match links that have both `href` and `title` attributes**: Combines multiple attribute selectors.
+:::interactive_editor
+
+```html
+
+Href + Title
+Only href
+```
+
```css
a[href][title] {
color: green;
}
```
+:::
+
- **Match a single word within a space-separated list**: Targets links that have a specific class word.
+:::interactive_editor
+
+```html
+
+Primary link
+Secondary link
+```
+
```css
a[class~="primary"] {
color: red;
@@ -44,8 +82,18 @@ a[class~="primary"] {
}
```
+:::
+
- **Match values that start with a specific prefix**: Targets links starting with `https://`.
+:::interactive_editor
+
+```html
+
+HTTPS link
+HTTP link
+```
+
```css
a[href^="https://"] {
color: green;
@@ -53,8 +101,18 @@ a[href^="https://"] {
}
```
+:::
+
- **Match values that end with a specific suffix**: Targets links ending with `.jpg`.
+:::interactive_editor
+
+```html
+
+Image link
+HTML link
+```
+
```css
a[href$=".jpg"] {
color: darkgreen;
@@ -62,38 +120,85 @@ a[href$=".jpg"] {
}
```
+:::
+
- **Match values that contain a substring anywhere**: Targets links that contain `https` anywhere in the value.
+:::interactive_editor
+
+```html
+
+Secure link
+Local link
+```
+
```css
a[href*="https"] {
color: teal;
}
```
+:::
+
- **Summary**: These patterns make it easy to consistently style links based on their attributes and values.
## Targeting Elements with the `lang` and `data-lang` Attribute
- **`lang` Attribute**: This attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website.
+:::interactive_editor
+
+```html
+
+
English text
+
French text
+```
+
```css
p[lang="en"] {
font-style: italic;
}
```
+:::
+
- **`data-lang` Attribute**: Custom data attributes like the `data-lang` attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text. Here is how you can style elements based on the `data-lang` attribute:
+:::interactive_editor
+
+```html
+
+
French content
+
English content
+```
+
```css
div[data-lang="fr"] {
color: blue;
}
```
+:::
+
## Working with the Attribute Selector, Ordered List Elements and the `type` Attribute
- **`type` Attribute**: When working with ordered lists in HTML, the `type` attribute allows you to specify the style of numbering used, such as numerical, alphabetical, or Roman numerals.
+:::interactive_editor
+
+```html
+
+
+
