Attribute Selector

We can also select elements based on their attributes. For example, in the following code, we can see that both images have the src attribute:

<img src="images/cat.jpg" />
<img src="images/dog.jpg" />

To select all elements with the src attribute, we can use the following selector [src] like this:

[src] {
    height: 50px;
}

We can see that we enclose the attribute we want to select in square brackets. However, we can be more specific and select an element that has the src attribute with the value images/dog.jpg. We can achieve this as follows:

[src="images/dog.jpg"] {
    height: 100px;
}

We select elements with a specific attribute value by writing the attribute and its value in the same way as in HTML and enclosing them in square brackets.