Categories
In CSS, attribute selectors allow you to select elements based on the presence, absence, or specific values of HTML attributes. This provides a powerful way to target elements that have certain attributes or attribute values. Attribute selectors are denoted by square brackets ([]).
There are several types of attribute selectors available in CSS. Let's go through each of them with examples:
1. Presence Attribute Selector ([attribute]): The presence attribute selector selects elements that have a specific attribute, regardless of its value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Presence Attribute Selector Example</title>
<style>
[target] {
color: blue;
}
</style>
</head>
<body>
<a href="#" target="_blank">Link 1</a>
<a href="#">Link 2</a>
<a href="#" target="_blank">Link 3</a>
</body>
</html>
In this example, the [target] attribute selector is applied to anchor (<a>) elements. The selector will target all anchor elements that have the "target" attribute, regardless of its value. The "Link 1" and "Link 3" will be styled with blue color.
2. Exact Value Attribute Selector ([attribute=value]): The exact value attribute selector selects elements that have a specific attribute with an exact value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Exact Value Attribute Selector Example</title>
<style>
[type="submit"] {
background-color: green;
color: white;
padding: 5px 10px;
}
</style>
</head>
<body>
<input type="submit" value="Submit">
<input type="text" placeholder="Type here">
</body>
</html>
In this example, the [type="submit"] attribute selector is applied to input elements. It selects the input element with the "type" attribute having the value "submit" (i.e., the submit button). The submit button will be styled with a green background, white text, and some padding.
3. Value Starts With Attribute Selector ([attribute^=value]): The value starts with attribute selector selects elements that have an attribute value that starts with a specific string.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Value Starts With Attribute Selector Example</title>
<style>
[href^="https://"] {
color: green;
}
</style>
</head>
<body>
<a href="https://example.com">Link 1</a>
<a href="http://example.com">Link 2</a>
</body>
</html>
In this example, the [href^="https://"] attribute selector is applied to anchor (<a>) elements. It selects all anchor elements whose "href" attribute starts with "https://". The "Link 1" will be styled with green color because it has an "href" attribute that starts with "https://".
4. Value Ends With Attribute Selector ([attribute$=value]): The value ends with attribute selector selects elements that have an attribute value that ends with a specific string.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Value Ends With Attribute Selector Example</title>
<style>
[href$=".pdf"] {
color: red;
}
</style>
</head>
<body>
<a href="document.pdf">Document 1</a>
<a href="report.docx">Document 2</a>
<a href="presentation.pdf">Document 3</a>
</body>
</html>
In this example, the [href$=".pdf"] attribute selector is applied to anchor (<a>) elements. It selects all anchor elements whose "href" attribute ends with ".pdf". The "Document 1" and "Document 3" links will be styled with red color because they have "href" attributes that end with ".pdf".
5. *Value Contains Attribute Selector ([attribute=value])**: The value contains attribute selector selects elements that have an attribute value that contains a specific string.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Value Contains Attribute Selector Example</title>
<style>
[title*="example"] {
background-color: yellow;
}
</style>
</head>
<body>
<p title="This is an example paragraph">Paragraph 1</p>
<p title="Another paragraph">Paragraph 2</p>
</body>
</html>
In this example, the [title*="example"] attribute selector is applied to paragraph (<p>) elements. It selects all paragraph elements whose "title" attribute contains the string "example". The "Paragraph 1" will have a yellow background because its "title" attribute contains "example".
These are some of the commonly used attribute selectors in CSS. Attribute selectors provide a flexible way to target and style elements based on specific attributes or attribute values, making them useful for various styling scenarios in web development.