CSS attribute selectors
CSS Attribute Selectors
In CSS, attribute selectors are a method for selecting elements based on their attribute values. Attribute selectors allow for more precise selection of elements for styling, enabling more flexible style control. In this article, we’ll explore the use of CSS attribute selectors in detail, including sample code.
1. Basic Attribute Selector Syntax
The basic syntax of an attribute selector is as follows:
element[attribute=value] {
/* styles */
}
Where, element represents the element to be selected, attribute represents the attribute name to be matched, and value represents the attribute value to be matched. Here is a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Attribute Selector Example</title>
<style>
p[lang="en"] {
color: blue;
}
</style>
</head>
<body>
<p lang="en">Hello, geek-docs.com!</p>
<p lang="fr">Bonjour, geek-docs.com!</p>
</body>
</html>
Output:
In the example above, we use the attribute selector p[lang="en"] to select <p> elements whose lang attribute value is en and set their text color to blue. Therefore, only the text color of the first <p> element will be set to blue.
2. Common Uses of Attribute Selectors
2.1 Exactly Matching Attribute Values
Attribute selectors can match attribute values exactly; they will only take effect when the attribute value is exactly equal to the specified value. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Attribute Selector Example</title>
<style>
a[href="https://geek-docs.com"] {
color: green;
}
</style>
</head>
<body>
Geek Docs
Google
</body>
</html>
Output:
In the example above, we use the attribute selector a[href="https://geek-docs.com"] to select elements whose href attribute value is https://geek-docs.com and set their text color to green.
2.2 Contains Specific Attribute Values
In addition to matching attribute values exactly, attribute selectors can also select elements that contain a specific attribute value. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS attribute selector example</title>
<style>
a[href*="geek-docs.com"] {
font-weight: bold;
}
</style>
</head>
<body>
Geek Docs
Google
</body>
</html>
Output:
In the example above, we use the attribute selector a[href*="geek-docs.com"] to select elements whose href attribute value contains geek-docs.com and set their text to bold.
2.3 Starting with a Specific Attribute Value
Attribute selectors can also select elements that begin with a specific attribute value. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS attribute selector example</title>
<style>
a[href^="https://"] {
text-decoration: underline;
}
</style>
</head>
<body>
Geek Docs
Google
</body>
</html>
Output:
In the example above, we use the attribute selector a[href^="https://"] to select elements whose href attribute value begins with https:// and add an underline style to them.
2.4 Ends with a Specific Attribute Value
Attribute selectors can also select elements that end with a specific attribute value. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Attribute Selector Example</title>
<style>
a[href$=".com"] {
color: red;
}
</style>
</head>
<body>
Geek Docs
Google
</body>
</html>
Output:
In the example above, we use the attribute selector a[href$=".com"] to select elements whose href attribute value ends with .com and set their text color to red.
3. Multiple Attribute Selectors
In addition to single attribute selectors, we can also use multiple attribute selectors to select elements that meet multiple attribute conditions simultaneously. The syntax for multiple attribute selectors is as follows:
element[attribute1=value1][attribute2=value2] {
/* styles */
}
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Attribute Selector Example</title>
<style>
a[href="https://geek-docs.com"][target="_blank"] {
color: purple;
}
</style>
</head>
<body>
Geek Docs
Google
</body>
</html>
Output:
In the example above, we use the multi-attribute selector a[href="https://geek-docs.com"][target="_blank"] to select elements whose href attribute value is https://geek-docs.com and whose target attribute value is _blank, and set their text color to purple.
4. Notes on Attribute Selectors
When using attribute selectors, please note the following:
- Attribute selectors are case-sensitive. Ensure that the capitalization of attribute names and values matches that of HTML.
- Attribute selectors do not support wildcards and can only match exact, contained, beginning with, or ending with.
- Attribute selectors can be combined with other selectors to achieve more complex selection effects.
Through this introduction, I believe you have gained a deeper understanding of CSS attribute selectors. Attribute selectors are one of the most useful selectors in CSS, allowing us to more precisely control the styling of page elements. By flexibly utilizing attribute selectors, we can achieve more personalized and professional page designs. I hope this article will help you better master the use of CSS attribute selectors and improve your page styling skills.
5. Summary
This article detailed the basic syntax and common uses of CSS attribute selectors, including exact matching of property values, containing specified property values, starting with a specified property value, ending with a specified property value, and multiple attribute selectors. Through code examples, I hope readers will better understand the use of attribute selectors and apply them flexibly in real-world projects.