Attribute Selector in CSS with Example

The attribute selector in CSS allows you to select those HTML elements that have a specified attribute or attribute-value pair. For example, em[lang]{ color: red; } will apply to all <em> elements that have a “lang” attribute.

This selector applies styles dynamically and precisely to elements with no additional classes or IDs. In CSS, attribute selectors have limited usage because they only support in the latest versions of web browsers.

Basic Syntax to Define Attribute Selector in CSS

We define an attribute selector within square brackets ([]). The basic syntax for defining an attribute selector in CSS is as follows:

element[attribute] {
   /* CSS properties: Values */
}

In the above syntax, the element specifies the type of HTML element you want to select. For example, div, input, a, etc. If you want to select any element with a specific attribute, you can omit the element type and use just the attribute selector (e.g., [attribute]).

The attribute within square brackets [attribute] specifies the attribute you want to select. The square brackets ([]) are used to denote that this is an attribute selector. Inside the curly braces, you define the CSS styles you want to apply to the selected elements.

Let’s consider an example based on the above syntax.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
input[placeholder] {
    border: 2px solid blue;
}
</style>
</head>
<body>
    <input type="text" name="username" placeholder="Enter your username">
    <input type="password" name="password" placeholder="Enter your password">
</body>
</html>

In this example, we have defined an attribute selector to select all input elements with a placeholder attribute. This will apply a blue border to all <input> elements that have a placeholder attribute.

Types of Attribute Selectors in CSS

CSS provides several types of attribute selectors that enable you to select elements in various ways:

  • Existence selector
  • Equality selector
  • Substring selector
  • Prefix selector
  • Suffix selector
  • Space selector
  • Hyphen selector

1. Existence Selector

An existence selector selector all the elements that have a specific attribute, regardless of its value. It is also known as attribute presence selector. This is useful when you want to apply CSS styles to elements just because they possess a certain attribute. The general syntax to define attribute presence selector is as:

element[attribute] {
   /* CSS Styles */
}

Example 2:

<!DOCTYPE html>
<html>
<head>
<style>
img[alt] {
    border: 2px solid green;
}
</style>
</head>
<body>
    <img src="logo.png" alt="Company Logo">
    <img src="banner.jpg">
    <img src="icon.png" alt="App Icon">
</body>
</html>

In this example, the attribute selector img[alt] will select all the <img> elements that have an alt attribute. The selector will apply a green border to all selected elements.

When this CSS style is applied to the an HTML <img> element, the first and third images will have a green border because they both have an alt attribute. Whereas the second image will not be styled because it has no this attribute.

2. Equality Selector

Equality selector in CSS selects the elements based on the specific attribute value. It is also known as attribute value selector. This selector applies styles to an element with an attribute whose name exactly matches the specified attribute name and value exactly matches with the specified value.

The general syntax to define an attribute selector in CSS is as follows:

element[attribute="value"] {
     /* CSS Styles */
}

In this syntax, the element specifies the type of HTML element you want to select. However, this is optional. You can use only the attribute selector if you want to target all elements with a specific attribute value. The value of the attribute should be enclosed in double quotes.

Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
button[type="submit"] {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
</style>
</head>
<body>
   <button type="button">Click Me</button>
   <button type="submit">Submit</button>
   <button type="reset">Reset</button>
</body>
</html>

Output:

An example of equality attribute selector in CSS.

In this example code, each <button> element has a type attribute with different values. The selector button[type=”submit”] will target all button elements with a type attribute equal to “submit” value.

You can use the attribute value selector to style different types of form elements based on their type attribute value. Let’s take an example on it.

Example 4:

<!DOCTYPE html>
<html>
<head>
<style>
form {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box; /* Include padding and border in the element's total width */
  padding: 0 15px; /* Add padding to avoid touching the edges */
}
/* Style for text input */
input[type="text"],
input[type="password"] {
   width: 100%;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box; /* Include padding and border in the element's total width */
}
/* Style for radio buttons */
input[type="radio"] {
   margin-right: 5px;
   transform: scale(1.2);
}
/* Style for submit button */
input[type="submit"] {
   display: block; /* Make the submit button take its own line */
   background-color: #4CAF50;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   box-sizing: border-box;
   margin-top: 10px; /* Add margin for spacing */
}
input[type="submit"]:hover {
   background-color: #45a049;
}
</style>
</head>
<body>
<form>
   <input type="text" name="username" placeholder="Enter your username">
   <input type="password" name="password" placeholder="Enter your password">
   <input type="radio" name="gender" value="male"> Male
   <input type="radio" name="gender" value="female"> Female
   <input type="submit" value="Submit">
</form>
</body>
</html>

Output:

An example of equality or attribute value selector in CSS.
3. Substring Selector

Attribute value substring selector in CSS allows you to select an element with an attribute whose name matches with the specified attribute name and the value contains a specified substring.


The specified string can appear anywhere at the beginning, middle, or end within the attribute’s value. The general syntax to define attribute value substring selector in CSS is as follows:

element[attribute *= "value"] {
   /* CSS Styles */
}

In this syntax, the selector [attribute*=”value”] selects elements whose attribute contains the substring value. The operator (*=) is used to check if the attribute value contains the specified substring at any position (beginning, middle, or end).

Let’s take an example in which we have a list of links on a webpage, and we want to highlight all the links that point to documentation pages. The links of these documentation pages contain the substring “docs” in their URLs. We can use the *= selector to style them specifically.

Example 5:

<!DOCTYPE html>
<html>
<head>
<style>
a[href*="docs"] {
   color: green;
   font-weight: bold;
   text-decoration: underline;
}
</style>
</head>
<body>
<ul>
   <li><a href="https://example.com/docs/intro">Introduction to Docs</a></li>
   <li><a href="https://example.com/about">About Us</a></li>
   <li><a href="https://example.com/docs/setup">Setup Guide</a></li>
   <li><a href="https://example.com/contact">Contact</a></li>
   <li><a href="https://example.com/docs/faq">FAQs</a></li>
</ul>
</body>
</html>

In this example code, the substring selector a[href*=”docs”] will select all <a> elements whose href attribute contains the substring “docs” anywhere within the URL.

4. Prefix Selector

This selector selects an element with an attribute whose name matches with the specified attribute name and the value starts with the specified value. The general syntax for the prefix selector in CSS is as follows:

element[attribute^="value"] {
   /* CSS Styles */
}

In this syntax, the selector [attribute^=”value”] selects all the elements whose attribute name matches with the specified name and the value starts the specified value. The ^= operator is used to select elements with an attribute value that begins with a specified substring.

Example 6:

<!DOCTYPE html>
<html>
<head>
<style>
a[href^="https"] {
    color: blue; /* Change text color to blue */
    font-weight: bold; /* Make the text bold */
    padding-left: 20px; /* Add padding for an icon */
}
</style>
</head>
<body>
<ul>
   <li><a href="https://secure-site.com">Secure Site</a></li>
   <li><a href="http://insecure-site.com">Insecure Site</a></li>
   <li><a href="https://another-secure.com">Another Secure Site</a></li>
   <li><a href="ftp://fileserver.com">FTP Server</a></li>
</ul>
</body>
</html>

In this example, the prefix selector a[href^=”https”] will select all <a> elements with an href attribute that starts with the substring “https”.

5. Suffix Selector

The suffix selector in CSS selects an element with an attribute whose name matches with the specified attribute name and the value ends with the specified value. The general syntax to define suffix selector is as follows:

element[attribute $= "value"] {
   /* CSS Styles */
}

Example 7:

img[src $= ".jpg"] {
    border: 2px solid red;
}

In this example, the suffix selector img[src $= “.jpg”] will select all <img> elements with a src attribute whose value ends with “.jpg”.

6. Space-Separated Selector

The white space-separated selector in CSS allows you to select an element with an attribute whose name matches with the specified attribute name and whose value matches with any one within the list of white separated words, such as “en-us en-gb en-au”. The general syntax for space-separated attribute selector in CSS is as follows:

element[attribute ~= "value"] {
    /* CSS Styles */
}

Example 8:

<!DOCTYPE html>
<html>
<head>
<style>
[title ~= "love"] {
    border: 5px solid red;
}
</style>
</head>
<body>
   <p title="love CSS">I love CSS.</p>
   <p title="love JavaScript">I love JavaScript programming.</p>
</body>
</html>

In this example, the selector [title ~= “love”] will select all the elements with a title attribute whose value is a list of white space-separated words that contains “love”.

7. Hyphen Selector

The attribute hyphen selector in CSS allows you to select an element with an attribute whose name must match with the specified attribute name and the value begins with the specified hyphen-separated value. The general syntax for this selector is as follows:

element[attribute |= "value"]
{
   /* CSS Styles */
}

Example 9:

<!DOCTYPE html>
<html>
<head>
<style>
[title |= "love"] {
    border: 5px solid red;
}
</style>
</head>
<body>
   <p title="love-CSS">I love HTML and CSS.</p>
   <p title="love-JavaScript">I love JavaScript programming.</p>
</body>
</html>

In this example, the selector [title |= “love”] will select all the elements with a title attribute whose value is hyphen-separated words that contain “love”.

In this tutorial, you have learned attribute selector in CSS through examples. You also learned different types of attribute selectors with the help of syntax and examples. I hope that you will have understood the basic syntax and concepts of attribute selectors and practiced all examples.

Related Posts

Trending now

What Is Cybersecurity Risk Management
Variadic Functions in PHP
PHP Arrays
Indexed Array in PHP