In this section, we will learn what the attribute selector is and how to use it in CSS.
Note: we’re assuming you’re already familiar with the CSS selectors.
Attributes in CSS
We can use the attributes of elements to target one or more HTML elements and apply CSS style to them.
For example, let’s say we have one or more HTML elements with the `name` attribute and the value `companies`. Now, we can use the CSS attribute selector to find the entire elements with the name attribute and the specified value and then apply a block of style to those elements.
So in short, the focus of CSS Attribute Selector is on targeting HTML elements based on their attributes and the values we set for those attributes.
CSS Types of Attribute Selector:
In general, there are 7 types of CSS attribute selector out there that we can use to target HTML elements.
Here are these 7 attribute selectors:
|
Element-name [attribute ] { property:value; } |
Element-name [attribute ~=”value” ] { property:value; } |
|
Element-name [ attribute= “value” ] { property:value; } |
Element-name [ attribute ^= “value” ] { property:value; } |
|
Element-name [ attribute $=”value” ] { property:value; } |
Element-name [ attribute *=”value” ] { property:value; } |
|
Element-name [ attribute|=”value” ] { property:value; } |
`element-name`: this is the element name we’re looking for in an HTML document. For example, we can set the value `p` or `div` or `body` or basically any other HTML element on a page. Note: This value is optional and can be removed. In that case, the effect of the attribute selector will be element independent! (We will explain this in just a moment)
`[ ]`: The attribute selector works using the attribute names and values we set for those attributes. Now, here inside the pair of braces, we put the name of the target attribute that we’re looking for! For example, the value could be `name`, `class`, `id`, or any other attribute available for the `element-name`. Note that inside the pair of braces, things get more complicated! For example, let’s say we have an attribute selector like this: `p[class = “first”]`. This selector means the target of the CSS style are those `<p>` elements on a page that have the `class` attribute and the value “first” assigned to this attribute. So the entire <p> elements with the class attribute and the value “first” in an HTML document will be the target of the CSS style of this selector!
We said that if the `element-name` is ignored, then the effect of attribute selector will be element independent. This means no matter what type of element is using a specific attribute; if it is matched the attribute selector, then the style of that selector will be applied to that element as well! For example, let’s say the attribute selector is set to `[name = “companies”]`. This means the target elements of this selector are those that have the name attribute with the value “companies” set to it. So doesn’t matter if the element is <p> or <div> or <body> etc. as long as it has the attribute `name` and the specified value, it will be the target of this selector.
Note: if the `element-name` is used, there should not be any space between the element-name and the pair of braces that comes after.
Alright, now let’s get into the details of these attribute selectors and see how each one of them works in CSS.
CSS Attribute Selector: Element-name[attribute ]
This type of attribute selector only checks to see if an element has set a specific attribute or not! It doesn’t care what the value of that attribute is!
For example:
p[class]
This selector means find those <p> elements on the page that have the `class` attribute but don’t care about the value of the class attribute. So if there are two <p> elements, one with the class attribute and the value “A” and the other with the value “B”, both will be the target of this selector because both have the class attribute.
Example: using CSS attribute Element-name[attribute ] selector
See the Pen using CSS attribute Element-name[attribute ] selector by Omid Dehghan (@odehghan) on CodePen.
CSS Attribute Selector: Element-name[attribute ~=”value” ]
Some attributes like “class” can have more than one value assigned to them (using space for separating those values). When we want to select those elements that have a specific attribute for example “class” and the value should also be specific, for example “animal” but we don’t care the position of this value in the target attribute, then we can use this type of selector.
Example: using CSS attribute Element-name[attribute ~=”value” ] selector
See the Pen using CSS attribute Element-name[attribute ~="value" ] selector by Omid Dehghan (@odehghan) on CodePen.
CSS Attribute Selector: Element-name[ attribute= “value” ]
This type of attribute selector is used to target those elements that:
- First of all, has a specific attribute.
- And secondly, the value of that attribute is equal to the value we declare inside the pair of brackets `[]`.
Example: using CSS attribute Element-name[ attribute= “value” ] selector
See the Pen using CSS attribute Element-name[ attribute= "value" ] selector by Omid Dehghan (@odehghan) on CodePen.
Note that in this example, the second <p> element has two values for its class attribute! So even though one of these two values is set to `A`, it won’t be in the target elements of the attribute selector `p[class=”A”]`.
Also, be aware that the value we declare inside the pair of bracket is case sensitive! This means the value “a” is different from the value “A”.
CSS Attribute Selector: Element-name[ attribute ^= “value” ]
The target of this attribute selector are those elements with a specific attribute that has its value; start with the value we’ve set inside the pair of brackets `[]` of this selector!
For example:
div[class ^=”top”]
This means the target are those <div> elements on a page that have the class attribute and the value of this attribute starts with the characters `top`. But it doesn’t matter if the full version of the class value is “topnotch” or “top-level” etc.! As long as it starts with these three characters `top`, it will be part of the elements that this selector is targeting.
Example: using CSS attribute Element-name[ attribute ^= “value” ] selector
See the Pen using CSS attribute Element-name[ attribute ^= "value" ] selector by Omid Dehghan (@odehghan) on CodePen.
CSS Attribute Selector: Element-name[ attribute $=”value” ]
The target of this attribute selector are those elements with the specified attribute that their values end with the value we set inside the pair of brackets `[]`.
For example:
p[class $=”pic”]
This selector means target those <p> elements in a page that have the class attribute and the value of this attribute ends with “pic”. So if there’s a <p> element and its class attribute has the value “epic”, it will be part of the elements that the style of this selector will be applied to it.
Example: using CSS attribute Element-name[ attribute $=”value” ] selector
See the Pen using CSS attribute Element-name[ attribute $="value" ] selector by Omid Dehghan (@odehghan) on CodePen.
CSS Attribute Selector: Element-name[ attribute *=”value” ]
This attribute selector targets those `Element-name` with the specified attribute that their values contain the characters we declare within the pair of brackets `[]`.
For example:
img[name *=”ss”]
This attribute selector targets those <img> elements that have the `name` attribute and their values for this attribute contain the two characters `ss`. For example, if there’s an <img> element with the name attribute and the value `asset`, that element will be the target of this selector.
Example: using CSS attribute Element-name[ attribute *=”value” ] selector
See the Pen using CSS attribute Element-name[ attribute *="value" ] selector by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Attribute Selector: Element-name[ attribute|=”value” ]
When we want to select those elements that have a specific attribute for example “id” and we also care about the value, for example, to be “blue” but we don’t care if the matched value has also a hyphenated word attached to it like “blue-sky”, then we can use this type of selector.
Example: using CSS attribute Element-name[ attribute|=”value” ] selector
See the Pen test by Enjoy Tutorials (@enjoytutorials) on CodePen.
In the example above, <h1 class=”topnotch-number-one”> matches our selector and so the declarations within the declaration block of this selector will apply to this element.
