Skip to content

Commit 95880bc

Browse files
chore(curriculum): update attribute script to include more examples (freeCodeCamp#61733)
Co-authored-by: Huyen Nguyen <[email protected]>
1 parent 7ea96f8 commit 95880bc

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,47 @@ a[href][title] {
4545

4646
In this case, only links that contain both `href` and `title` attributes will be styled with green text. This level of control is what makes attribute selectors so powerful in CSS.
4747

48+
Another example for an attribute selector is to match a single value within a space-separated list of values in an attribute.
49+
50+
Here is an example of an anchor element with multiple classes:
51+
52+
```html
53+
<a href="https://example.com" class="btn primary large">Visit Example Site</a>
54+
```
55+
56+
To target this specific anchor element, you can use the following selector:
57+
58+
```css
59+
a[class~="primary"] {
60+
color: red;
61+
font-weight: bold;
62+
}
63+
```
64+
65+
The `[attr~=value]` syntax is used here to target all anchor elements where the class attribute contains the word `"primary"`.
66+
67+
If you need to target an element where the attribute value is prefixed by a specific value, then you can use the `[attr^=value]` syntax. Here is an example:
68+
69+
```css
70+
a[href^="https://"] {
71+
color: green;
72+
text-decoration: underline;
73+
}
74+
```
75+
76+
In this example, the `a[href^="https://"]` selector will target all anchor elements where the `href` attribute value starts with `"https://"`.
77+
78+
To target elements where the attribute value ends with a specific value, you can use the `[attr$=value]` syntax. Here is an example:
79+
80+
```css
81+
a[href$=".jpg"] {
82+
color: darkgreen;
83+
text-decoration: underline dotted;
84+
}
85+
```
86+
87+
In this example, the `a[href$=".jpg"]` selector will target all anchor elements where the `href` attribute value ends with `.jpg`.
88+
4889
Using attribute selectors not only enhances the styling of your webpage but also improves accessibility by making interactive elements like links more distinguishable based on their attributes.
4990

5091
# --questions--

0 commit comments

Comments
 (0)