| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Attribute selectors in CSS allow you to select HTML elements based on their attributes and attribute values. These selectors provide a powerful way to target specific elements without relying solely on class or ID selectors. Here’s a detailed look at attribute selectors with examples:
Basic Attribute Selector
The basic attribute selector matches elements that have a specified attribute, regardless of its value.
/* Selects all elements with a title attribute */
[title] {
border: 1px solid red;
}
<p title="This is a title">Paragraph with title</p>
<p>No title here</p>
In this example, only the first paragraph will have a red border.
Attribute Selector with Specific Value
This selector matches elements with an attribute that exactly equals a specified value.
/* Selects all elements with a title attribute equal to "example" */
[title="example"] {
color: blue;
}
<p title="example">This text will be blue.</p>
<p title="not example">This text will not be blue.</p>
Attribute Selector with Value List
This selector matches elements with an attribute whose value is a space-separated list of words, one of which is the specified value.
/* Selects elements where the class attribute contains the word "highlight" */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight">Highlighted text</p>
<p class="highlight important">Highlighted and important text</p>
<p class="important">Important but not highlighted text</p>
Attribute Selector with Substring Matching
These selectors match elements based on substrings within the attribute value.
1. Prefix Matching (‘
^=‘): Matches elements with an attribute value that starts with the specified value.
/* Selects elements where the class attribute starts with "btn-" */
[class^="btn-"] {
padding: 10px;
}
<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="button">Not matched</button>
2. Suffix Matching (‘
$=‘): Matches elements with an attribute value that ends with the specified value.
/* Selects elements where the href attribute ends with ".pdf" */
[href$=".pdf"] {
text-decoration: underline;
}
<a href="document.pdf">PDF Document</a>
<a href="image.png">Image</a>
3. Substring Matching (‘
*=‘): Matches elements with an attribute value that contains the specified value.
/* Selects elements where the href attribute contains "example" */
[href*="example"] {
color: green;
}
<a href="https://example.com" target="_blank" rel="noopener">Example</a>
<a href="https://test.com" target="_blank" rel="noopener">Not matched</a>
<a href="https://www.exampletest.com" target="_blank" rel="noopener">Example Test</a>
Attribute Selector with Value Prefix (' |= ')
This selector matches elements with an attribute value that is exactly the specified value or starts with the specified value followed by a hyphen.
/* Selects elements where the lang attribute is exactly "en" or starts with "en-" */
[lang|="en"] {
font-style: italic;
}
<p lang="en">English</p>
<p lang="en-US">American English</p>
<p lang="fr">French</p>
Attribute Selector with Multiple Attributes
You can combine multiple attribute selectors to target elements with multiple specific attributes.
/* Selects elements with both a title attribute and a class attribute equal to "note" */
[title][class="note"] {
border: 2px solid green;
}
<p title="info" class="note">Note with title</p>
<p title="info" class="highlight">Not a note</p>
<p class="note">Note without title</p>
These examples illustrate how attribute selectors can be used to precisely target HTML elements based on their attributes and attribute values. This allows for more flexible and maintainable CSS, especially when dealing with dynamic content or large codebases.
