In this chapter, we will learn about CSS attribute selectors. Attribute selectors allow you to select elements based on the presence or value of an attribute. This feature provides a powerful way to style elements dynamically based on their attributes. We will cover:
- Introduction to Attribute Selectors
- Basic Attribute Selector
- Attribute Selector with Specific Value
- Attribute Selector with Partial Value
- Attribute Selector with Prefix
- Attribute Selector with Suffix
- Attribute Selector with Substring
- Examples of Using Attribute Selectors
Introduction to Attribute Selectors
Attribute selectors target elements based on the attributes they have. They are particularly useful for selecting elements dynamically and applying styles based on attribute values.
Syntax
element[attribute] {
property: value;
}
Basic Attribute Selector
The basic attribute selector targets elements that have a specific attribute, regardless of its value.
Syntax
element[attribute] {
property: value;
}
Example
a[target] {
color: blue;
}
HTML
<a href="https://example.com" target="_blank">External Link</a>
<a href="#section1">Internal Link</a>
In this example, the external link with the target attribute will be styled with blue text.
Attribute Selector with Specific Value
This selector targets elements with a specific attribute value.
Syntax
element[attribute="value"] {
property: value;
}
Example
input[type="text"] {
border: 1px solid black;
}
HTML
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
In this example, only the text input field will have a black border.
Attribute Selector with Partial Value
You can select elements whose attribute value partially matches a given value.
Attribute Selector with Prefix
This selector matches elements whose attribute value starts with a specified value.
Syntax
element[attribute^="value"] {
property: value;
}
Example
a[href^="https"] {
color: green;
}
HTML
<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Non-Secure Link</a>
In this example, only the secure link starting with "https" will be styled with green text.
Attribute Selector with Suffix
This selector matches elements whose attribute value ends with a specified value.
Syntax
element[attribute$="value"] {
property: value;
}
Example
a[href$=".pdf"] {
color: red;
}
HTML
<a href="document.pdf">PDF Document</a>
<a href="image.jpg">Image File</a>
In this example, only the link to the PDF document will be styled with red text.
Attribute Selector with Substring
This selector matches elements whose attribute value contains a specified value.
Syntax
element[attribute*="value"] {
property: value;
}
Example
a[href*="example"] {
font-weight: bold;
}
HTML
<a href="https://example.com">Example Link</a>
<a href="https://sample.com">Sample Link</a>
In this example, only the link containing "example" will be styled with bold text.
Examples of Using Attribute Selectors
Example 1: Styling Form Elements by Type
input[type="text"] {
border: 1px solid black;
}
input[type="email"] {
border: 1px solid green;
}
input[type="password"] {
border: 1px solid red;
}
HTML
<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="password" placeholder="Password input">
Example 2: Styling Links Based on URL
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
color: red;
}
a[href*="example"] {
font-weight: bold;
}
HTML
<a href="https://example.com">Example Secure Link</a>
<a href="https://sample.com">Secure Link</a>
<a href="document.pdf">PDF Document</a>
<a href="document.txt">Text Document</a>
<a href="https://example.com">Example Link</a>
<a href="https://sample.com">Sample Link</a>
Example 3: Styling Elements with Data Attributes
div[data-role="admin"] {
background-color: lightblue;
}
div[data-role="user"] {
background-color: lightgreen;
}
HTML
<div data-role="admin">Admin Section</div>
<div data-role="user">User Section</div>
Conclusion
In this chapter, you learned about CSS attribute selectors, including how to select elements based on the presence or value of an attribute. You also learned about different types of attribute selectors, such as those matching specific values, prefixes, suffixes, and substrings. Understanding attribute selectors is essential for creating dynamic and flexible styles for your web pages.