Using attribute and grouping selectors, it is possible to style HTML elements based on a specific attribute value. For instance, let’s say you wish to target all links that open in a new tab. You can use the attribute selector to help style and distinguish them from the rest.
An attribute selector matches elements that have the specified attribute and value. Their syntax is quite simple:
For instance, to select all links that open in a new tab, you can use the following:
Sometimes you want to apply the same styles to more than one element. Instead of writing individual styles for each element, you can group them into a single rule. You can group selectors by separating them with a comma.
To use the attribute selector to select the
<a> element with an href attribute value containing
Greece, add the following code to style.css:
Next, in style.css, use the attribute selector to select the
<a> element that has an
href attribute value containing
'Italy'. Add a declaration of
color: lightgreen; to make the link appear light green.
Finally, use the attribute selector change the
<a> element that has an href attribute value containing
Sign up to start coding
Already have an account?