feat(curriculum): add attribute selector recap to CSS review (#62524)

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
DipakHalkude
2025-10-29 22:29:06 +05:30
committed by GitHub
parent 9231224b22
commit fdb74bea05

View File

@@ -27,6 +27,51 @@ a[title] {
}
```
- **Combine selectors to match links that have both `href` and `title` attributes**: Combines multiple attribute selectors.
```css
a[href][title] {
color: green;
}
```
- **Match a single word within a space-separated list**: Targets links that have a specific class word.
```css
a[class~="primary"] {
color: red;
font-weight: bold;
}
```
- **Match values that start with a specific prefix**: Targets links starting with https://
```css
a[href^="https://"] {
color: green;
text-decoration: underline;
}
```
- **Match values that end with a specific suffix**: Targets links ending with .jpg
```css
a[href$=".jpg"] {
color: darkgreen;
text-decoration: underline dotted;
}
```
- **Match values that contain a substring anywhere**: Targets links that contain https anywhere in the value.
```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.
@@ -62,7 +107,6 @@ ol[type="i"] {
}
```
# --assignment--
Review the CSS Attribute Selectors topics and concepts.