You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: curriculum/challenges/english/25-front-end-development/lecture-working-with-attribute-selectors/672aa840de72b3607bba4bed.md
+41Lines changed: 41 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,6 +45,47 @@ a[href][title] {
45
45
46
46
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.
47
47
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
+
<ahref="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: underlinedotted;
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
+
48
89
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.
0 commit comments