CSS Attributes Selectors

Question 1

What are CSS attributes selectors and what is their syntax?

Answer 1

Syntax: selector[attribute] {}

The [attribute] selector is used to select elements with a specified attribute.
It is possible to style HTML elements that have:

• specific attributes –> selector[attribute]
• specific attribute values –> selector[attribute=”value”]

In the second case, the operator can be more complex than just a simple equal sign:

• [attribute~=“value”]
• [attribute|=“value”]
• [attribute^=“value”]
• [attribute$=“value”]
• [attribute*=“value”]

Question 2

What is the difference between a.btn and a[class=”btn”]?

Answer 2

The selector[] syntax is an attribute selector. This will select any a tag with class=”btn”. However, it will not select a tag which has class=”btn btn_red”, for example (whereas a.btn would). It only exactly matches that attribute.