From fdb74bea05676058e0db9d0928d8b6079e3c5fe5 Mon Sep 17 00:00:00 2001 From: DipakHalkude <128908555+DipakHalkude@users.noreply.github.com> Date: Wed, 29 Oct 2025 22:29:06 +0530 Subject: [PATCH] feat(curriculum): add attribute selector recap to CSS review (#62524) Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- .../671a95990b86b68961340adc.md | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) 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 4095a932098..fa7dee0c9d3 100644 --- a/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md +++ b/curriculum/challenges/english/blocks/review-css-attribute-selectors/671a95990b86b68961340adc.md @@ -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.