--- title: "attribute -selectors" url: https://weworkworldwide.com/tutorials/attribute-selectors-2/ description: "This type of selectors is used to select elements based on their attributes and the value that each attribute might have. For example using this technique" date: 2026-07-12T17:00:04+00:00 source: https://weworkworldwide.com/llms.txt --- # attribute -selectors ``` line-numbers ``` This type of selectors is used to select elements based on their attributes and the value that each attribute might have. For example using this technique we can find those elements that firstly have class-attribute and secondly the value for that attribute is “animal”. Or let’s say we want to format only those elements that have class attribute and the value for this attribute whatever it is, it should ends with the letter ‘t’! With the help of Attribute selectors we can do that easily. There are 7 types of attribute selector: [TABLE] Note: We can remove the element-name from these type of selectors, which in that case it will apply the declaration block to all those HTML elements that match these type of selectors. Let’s explain each of these types of selectors on by one starting with: ``` line-numbers Element-name [attribute] { property:value; } ``` If we want to select those elements that have specific attribute for example “class” and we don’t care what value is assigned to the attribute, we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` We can remove the “element-name” in this type of selector which in that case the declaration within block of the selector will apply to all HTML elements that have this attribute. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` The next type of selector is: ``` line-numbers Element-name [attribute = "value"] { property:value; } ``` When we want to select those elements that have specific attribute for example “class” and we also care about the value of that attribute, for example to be “animal”, then we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` The next type of selector is: ``` line-numbers Element-name ["attribute" ~="value" ] { property: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 specific attribute for example “class” and the value should also be specific, for example “animal” but we don’t care where in the list of values assigned to that attribute our specific value is, then we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` The next type of selector is: ``` line-numbers Element-name [ "attribute" ^= "value" ] { property:value; } ``` When we want to select those elements that have specific attribute for example “class” but we only looking for the beginning portion of the value assigned to the attribute to match our specified value, we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` In the example above, both

element and

element have class attribute and the value assigned to the class for both elements starts with “top” which matches our selector and so the declarations within the declaration block of the selector will apply to these two elements. The next type of selector is: ``` line-numbers Element-name [ attribute $="value" ] { property:value; } ``` When we want to select those elements that have specific attribute for example “class” but we only looking for the ending portion of the value assigned to the attribute to match our specified value, we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` In the example above, only

element has a class attribute with a value that ends with “pic” which matches our selector and so the declarations within the declaration block of this selector will apply to this element. The next type of selector is: ``` line-numbers Element-name [ attribute *= "value" ] { property:value; } ``` When we want to select those elements that have specific attribute for example “id” but we only looking for some portion of the value assigned to the attribute to match our specified value (doesn’t matter if the matched value is at the beginning or the ending or in the middle of the value assigned to the attribute), we can use this type of selector. Example: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` In the example above, both

and

element have “class” attribute and the values assigned to these two classes have “op” within the body of the values. So as result, both matched the selector and the declarations within the declaration block of the selector will apply to these two elements. The next type of selector is: ``` line-numbers Element-name [ attribute|="value"] { property:value; } ``` When we want to select those elements that have 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: ``` line-numbers CSS is fun :)

Albert Einstein

Imagination is everything. It is the preview of life's coming attractions.

Insanity: doing the same thing over and over again and expecting different results.

``` In the example above,

matches our selector and so the declarations within the declaration block of this selector will apply to this element.