Learn CSS Attribute Selectors Fast! 💨
CSS Attribute Selectors may seem simple at first, but they can be expanded beyond this simplicity with the addition of a few different characters
Basic attribute selectors give you the ability to select elements based on if an attribute is present
OR
If an attribute is present and set to a particular value
Expanding this basic functionality by adding a few select characters right after the attribute name, we can select elements based on if an attribute is present and set to a specified value under certain conditions
Vertical Bar |
Selects elements based on the exact attribute value, or exact attribute value followed by a hyphen
Tilde ~
Selects elements based on an attribute value the contains a specific space-separated word
Asterisk *
Selects elements based on an attribute value containing the specified value (does not have to be separated by a hyphen or space)
Caret ^
Selects elements based on an attribute value that begins with the specified value (does not have to be a whole word)
Dollar Sign $
Selects elements based on an attribute value that ends with the specified value (does not have to be a whole word)
For those that prefer to learn from video, I created a short video tutorial on this topic 📽️
You can watch that tutorial via...
TikTok
tiktok.com/@htmlallthethings/video/7196044937043922181
YT Shorts
youtube.com/shorts/ZSldccdmKz8
Instagram Reels
instagram.com/reel/CoNxcAmgnty/
I also created a similar video tutorial on CSS Attribute Basics 📼
You can watch that tutorial via...
TikTok
tiktok.com/@htmlallthethings/video/7193469955747171589
YT Shorts
youtube.com/shorts/4nbRDw9TsTw
Instagram Reels
instagram.com/reel/Cn77L2dggGS/