Utilizing Attribute Selectors for Precise Element Styling in CSS

[attributename]

In CSS, the [attribute-name] selector is a type of attribute selector that targets HTML elements based on the presence of a specific attribute, regardless of the attribute's value. This selector is used to select elements that have a particular attribute, without considering the value of that attribute.

Selector Syntax: To use the [attribute-name] selector, you enclose the attribute name within square brackets.

[attribute-name] {
    /* CSS rules */
}

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Attribute Selector</title>
    <style>
      a[target] {
        color: green;
      }
      img[alt] {
        border: 2px solid blue;
      }
      input[title] {
        border: 1px solid brown;
      }
    </style>
  </head>
  <body>
    <h3>Attribute Selector tag[attributename]</h3>
    <img src="images/1.jpg" alt="Man" width="70px" />
    <p>
      This selector represents an

      <a href="#">element</a>

      with an "attribute name" attribute, whatever the value of the attribute

      <a target="_blank" href="#"> Read More </a>

      .
    </p>
    <img src="images/2.jpg" width="70px" />
    <hr />
    <label for="name">Name</label>
    <input type="text" id="name" title="Enter Name" /><br /><br />
    <label for="gender">Gender</label>
    <input type="radio" name="gender" checked />Male <input type="radio" name="gender" />Female <br /><br />
    <label for="address">Address</label>
    <input type="text" id="address" />
  </body>
</html>

Live Preview

The provided CSS code uses attribute selectors to target specific HTML elements based on the presence of certain attributes.

a[target] { color: green; } : This rule targets all <a> (anchor) elements that have a target attribute. In HTML, the target attribute is often used to specify how the linked content should be displayed (e.g., in a new window or tab). When an <a> element has a target attribute (regardless of its value), it will be styled with a green text color.

img[alt] { border: 2px solid blue; } : This rule targets all <img> (image) elements that have an alt attribute. The alt attribute in HTML is used to provide alternative text for the image, which is displayed if the image cannot be loaded or by screen readers for accessibility. When an <img> element has an alt attribute (again, regardless of its value), it will have a 2-pixel solid blue border applied to it.

input[title] { border: 1px solid brown; } : This rule targets all <input> elements that have a title attribute. The title attribute in HTML is typically used to provide additional information or a tooltip when the user hovers over the input element. When an <input> element has a title attribute, it will have a 1-pixel solid brown border.