Styling HTML Elements with Attribute Value Selectors in CSS

[attributename="value"]

In CSS, the [attribute-name="value"] selector is an attribute selector that targets HTML elements based on the presence of a specific attribute with a specific value. This selector allows you to select and style elements that have a particular attribute and a matching attribute value.

Selector Syntax: To use the [attribute-name="value"] selector, you enclose both the attribute name and the attribute value within square brackets, separated by an equal sign.

[attribute-name="value"] {
    /* 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>
      p[class="para"] {
        color: red;
      }
      input[type="text"] {
        background-color: pink;
      }
      img[width="75px"] {
        border: 2px solid red;
      }
    </style>
  </head>
  <body></body>
  <h3>[attributename="value"] Selector</h3>
  <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolor nulla sequi accusantium sed ad dolore culpa ab, velit fugiat repudiandae eveniet provident at animi blanditiis! In, explicabo quae! Quibusdam!</p>
  <img src="images/1.jpg" alt="Man" width="70px" />
  <p class="sample">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolor nulla sequi accusantium sed ad dolore culpa ab, velit fugiat repudiandae eveniet provident at animi blanditiis! In, explicabo quae! Quibusdam!</p>
  <img src="images/2.jpg" width="75px" />
  <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolor nulla sequi accusantium sed ad dolore culpa ab, velit fugiat repudiandae eveniet provident at animi blanditiis! In, explicabo quae! Quibusdam!</p>

  <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">Email Address</label>
  <input type="email" id="address" />
</html>

Live Preview

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

p[class="para"] { color: red; } : This rule targets all <p> (paragraph) elements that have a class attribute with the exact value "para." In HTML, the class attribute is commonly used to apply CSS styles to specific elements. When a <p> element has a class attribute set to "para," it will be styled with red text color.

input[type="text"] { background-color: pink; } : This rule targets all <input> elements that have a type attribute with the exact value "text." In HTML, the type attribute is used to specify the type of input field, and "text" is used for regular text input fields. When an <input> element is of type "text," it will have a pink background color.

img[width="75px"] { border: 2px solid red; } : This rule targets all <img> (image) elements that have a width attribute with the exact value "75px." The width attribute in HTML is used to specify the width of the image in pixels. When an <img> element has a width attribute set to "75px," it will have a 2-pixel solid red border.