Attribute & Grouping selectors

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.

Attribute Selectors

An attribute selector matches elements that have the specified attribute and value. Their syntax is quite simple:

1[attribute=value] {
2  /* styles */
3}

For instance, to select all links that open in a new tab, you can use the following:

1a[target="_blank"] {
2  /* styles */
3}

Grouping Selectors

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.

1.selector-one,
2.selector-two,
3.selector-three {
4  /* styles */
5}