CSS - Attribute Selectors

CSS provides a way to apply styles with HTML elements attributes.

Say for example, the <img> element has an attribute called alt. And we can apply styleto the <img> element based on the value of attribute alt.

Cool! Isn't it?

Let us understand with the below example.

Example :

<html>
<head>
	<style>
		img[alt] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="photo" width="400" height="300">
</body>
</html>

Output :

So, if you look at the above output, a red border is drawn across the image.

Now, let us come to the above code. We have an <img> element defined that has an altattribute.

And we have used this alt attribute in CSS.

<style>
	img[alt] {
		border: 3px solid red;
	}
</style>

All we have done taken the img element and placed the alt attribute inside square brackets.

img[alt] {
	border: 3px solid red;
}

And this is how we have defined the attribute selectors in CSS.

Similarly, we can use the CSS attribute selectors along with its value.

CSS Attribute Selector with value

Example :

<html>
<head>
	<style>
		img[alt="photo1"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="photo1" width="400" height="300">
    <img src="my_image2.png" alt="photo2" width="450" height="320">
</body>
</html>

Output :

In the above example, we have two images my_image1.png and my_image2.png.

<img src="my_image1.png" alt="photo1" width="400" height="300">
<img src="my_image2.png" alt="photo2" width="450" height="320">

Now, we want to apply a red border around the first image(i.e. my_image1.png) only.

And this is where CSS Attribute Selector with value comes handy. All we have done is, usedthe attribute(i.e. alt) along with its value(i.e. photo1) in the CSS.

<style>
	img[alt="photo1"] {
		border: 3px solid red;
	}
</style>

And the red border is applied only around my_image1.png.

CSS Attribute Selector with value using ~= operator

The ~= operator can be used with attribute value selector to select all the elements thatmatches the specified value.

Let us understand with the below example.

Example :

<html>
<head>
	<style>
		[alt~="photo"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="First photo" width="400" height="300">
    <img src="my_image2.png" alt="Second photo" width="450" height="320">
    <img src="my_image3.png" alt="Third image" width="450" height="320">
</body>
</html>

Output :

So, in the above example we have three images, my_image1.png, my_image2.png andmy_image3.png.

And for the first two images, the alt attribute has the common text photo(i.e. Firstphoto and Second photo).

<img src="my_image1.png" alt="First photo" width="400" height="300">
<img src="my_image2.png" alt="Second photo" width="450" height="320">

But the third image doesn't have the text photo in the alt attribute.

<img src="my_image3.png" alt="Third image" width="450" height="320">

Now, in the CSS properties we have used ~= operator with the value photo, to get allthe elements that matches the word photo in the alt attribute.

<style>
	[alt~="photo"] {
		border: 3px solid red;
	}
</style>

CSS Attribute Selector with value using |= operator

The |= operator is used with the attribute selector to get all the elements that matchesthe value and also the value that follows with a hyphen(i.e. -).

Example :

<html>
<head>
	<style>
		[alt|="Photo"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="Photo-one" width="400" height="300">
    <img src="my_image2.png" alt="Photo" width="450" height="320">
    <img src="my_image3.png" alt="PhotoThree" width="450" height="320">
</body>
</html>

Output :

So, in the above example we have three images with the values of alt attribute as Photo-one,Photo and PhotoThree.

<img src="my_image1.png" alt="Photo-one" width="400" height="300">
<img src="my_image2.png" alt="Photo" width="450" height="320">
<img src="my_image3.png" alt="PhotoThree" width="450" height="320">

Now, in the CSS properties we have used |= operator with the value Photo, to get allthe elements that matches the word Photo and Photo-one in the alt attribute.

<style>
	[alt|="Photo"] {
		border: 3px solid red;
	}
</style>

CSS Attribute Selector with value using ^= operator

The ^= operator is used with the attribute selector to get all the elements that startswith the specified value.

Example :

<html>
<head>
	<style>
		[alt^="Photo"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="PhotoOne" width="400" height="300">
    <img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
    <img src="my_image3.png" alt="PhotoThree" width="450" height="320">
</body>
</html>

Output :

So, in the above example we have three images with the values of alt attribute as PhotoOne,SecondPhoto and PhotoThree.

<img src="my_image1.png" alt="PhotoOne" width="400" height="300">
<img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
<img src="my_image3.png" alt="PhotoThree" width="450" height="320">

Now, in the CSS properties we have used ^= operator with the value Photo, to get allthe elements that starts with the word Photo and the first image(With alt attributevalue PhotoOne) and third image(With alt attribute value PhotoThree) is selected.

<style>
	[alt^="Photo"] {
		border: 3px solid red;
	}
</style>

CSS Attribute Selector with value using $= operator

The $= operator is used with the attribute selector to get all the elements that endswith the specified value.

Example :

<html>
<head>
	<style>
		[alt$="Photo"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="PhotoOne" width="400" height="300">
    <img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
    <img src="my_image3.png" alt="PhotoThree" width="450" height="320">
</body>
</html>

Output :

So, in the above example we have three images with the values of alt attribute as PhotoOne,SecondPhoto and PhotoThree.

<img src="my_image1.png" alt="PhotoOne" width="400" height="300">
<img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
<img src="my_image3.png" alt="PhotoThree" width="450" height="320">

Now, in the CSS properties we have used $= operator with the value Photo, to get allthe elements that ends with the word Photo and the second image(With alt attributevalue SecondPhoto) is selected.

<style>
	[alt$="Photo"] {
		border: 3px solid red;
	}
</style>

CSS Attribute Selector with value using *= operator

The *= operator is used with the attribute selector to get all the elements that containswith the specified value.

Example :

<html>
<head>
	<style>
		[alt*="Photo"] {
  			border: 3px solid red;
  		}
	</style>
</head>

<body>
    <img src="my_image1.png" alt="PhotoOne" width="400" height="300">
    <img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
    <img src="my_image3.png" alt="ImagePhotoThree" width="450" height="320">
</body>
</html>

Output :

So, in the above example we have three images with the values of alt attribute as PhotoOne,SecondPhoto and PhotoThree.

<img src="my_image1.png" alt="PhotoOne" width="400" height="300">
<img src="my_image2.png" alt="SecondPhoto" width="450" height="320">
<img src="my_image3.png" alt="ImagePhotoThree" width="450" height="320">

Now, in the CSS properties we have used *= operator with the value Photo, to get allthe elements that matches the word Photo and all the images are selected. Since all theimages have the text Photo in them.

<style>
	[alt*="Photo"] {
		border: 3px solid red;
	}
</style>

❮❮ PREV NEXT ❯❯