How to style an image using its alt attribute

Question

Apu June 03, 2023 . #alt . #Attribute

❌

How to style an image using its alt attribute

Typically, you style an image using its id, class attributes or tag name but in this article, you will learn how to style an image using its alt attribute.

style an image using alt attribute

  <style>
    img[alt="logo"]{
    border:2px solid red;
    }
  </style>
  <img alt="logo" src="https://app.3schools.in/logo.png">

Try it Yourself »

Using the attribute selector (eg. img[alt="logo"]) in css, you can style all the images that contain logo in the alt attributes.

Example 2 : style images that have alt attribute.

In the second example, I want to style images that have alt attributes (whatever the alt value is).

For example, I have three images. The first and second images have the Alt attribute but the third image has no Alt attribute. You can try to run the following code.

check if an image contains the alt attribute.

  <style>
    img[alt]{
    border:2px solid red;
    }
  </style>
  <img alt="logo" src="https://app.3schools.in/logo.png">
  <img alt="3schools" src="https://app.3schools.in/logo.png">
  <img src="https://app.3schools.in/logo.png">

Try it Yourself »

Example 3 : img[alt~=""] selector.

The img[alt~="logo"] selector select the image that contains the logo in the alt attribute.

If the alt text is alt="our official logo", then you can select the image. But if the alt text is alt="our officiallogo", then you can't select the image.

css img[alt~=""] selector

  <style>
    img[alt~="logo"]{
     border:2px solid gold;
    }
  </style>
  <img alt="logo" src="https://app.3schools.in/logo.png">
  <img alt="our official logo" src="https://app.3schools.in/logo.png">
  <img alt="3schoolslogo" src="https://app.3schools.in/logo.png">

Try it Yourself »

Css img[alt*="logo"] selector

Basically, the img[alt*="logo"] selector select the image that contains the logo in the alt attribute even the alt text is alt="our official-logo".

css img[alt*=""] selector

  <style>
    img[alt*="logo"]{
     border:2px solid gold;
    }
  </style>
  <img alt="logo" src="https://app.3schools.in/logo.png">
  <img alt="our official logo" src="https://app.3schools.in/logo.png">
  <img alt="3schoolslogo" src="https://app.3schools.in/logo.png">

Try it Yourself »

img[alt^="logo"] and img[alt$="logo"] selector.

img[alt^=""] | value start with

  <style>
    img[altalt^="logo"]{
     border:2px solid gold;
    }
  </style>
  <img alt="logo is" src="https://app.3schools.in/logo.png">
  <img alt="our official logo" src="https://app.3schools.in/logo.png">
  <img alt="3schoolslogo" src="https://app.3schools.in/logo.png">

Try it Yourself »

img[alt$=""] | value end with

  <style>
    img[alt$="logo"]{
     border:2px solid gold;
    }
  </style>
  <img alt="logo" src="https://app.3schools.in/logo.png">
  <img alt="our official logo" src="https://app.3schools.in/logo.png">
  <img alt="3schoolslogo" src="https://app.3schools.in/logo.png">

Try it Yourself »

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:47:09+05:30

Typically, you style an image using its id , class attributes or tag name but in this arti…