6.1 Types of Attribute Selectors
Attribute selectors in CSS let you pick elements based on the presence of attributes, their values, or parts of their values. They offer some really flexible and powerful ways to style HTML elements, making them especially handy for working with dynamic content and interactive web pages.
Types of attribute selectors
- Attribute Selector
- Attribute Selector with Value
- Attribute Selector with Prefix
- Attribute Selector with Suffix
- Attribute Selector with Substring
- Attribute Selector with Whitespace
- Attribute Selector with Hyphen
6.2 Attribute Selector
The attribute selector selects elements that have the specified attribute, regardless of its value.
Syntax:
[attribute] {
property: value;
property: value;
}
Example:
/* Selects all elements that have a title attribute */
[title] {
color: blue;
}
<p title="This is a title">This text will be blue.</p>
<p>This text will not be blue.</p>
6.3 Attribute Selector with Value
The attribute selector with a value selects elements whose attributes have the specified value.
Syntax:
[attribute="value"] {
property: value;
property: value;
}
Example:
/* Selects all elements where the title attribute is "Example" */
[title="Example"] {
color: green;
}
<p title="Example">This text will be green.</p>
<p title="Another example">This text will not be green.</p>
6.4 Attribute Selector with Prefix
The attribute selector with a prefix selects elements whose attributes start with the specified value.
Syntax:
[attribute^="value"] {
property: value;
property: value;
}
Example:
/* Selects all elements where the title attribute starts with "Start" */
[title^="Start"] {
color: red;
}
<p title="Start of text">This text will be red.</p>
<p title="Not starting">This text will not be red.</p>
6.5 Attribute Selector with Suffix
The attribute selector with a suffix selects elements whose attributes end with the specified value.
Syntax:
[attribute$="value"] {
property: value;
property: value;
}
Example:
/* Selects all elements where the title attribute ends with "end" */
[title$="end"] {
color: orange;
}
<p title="This is the end">This text will be orange.</p>
<p title="This is the start">This text will not be orange.</p>
6.6 Attribute Selector with Substring
The attribute selector with a substring selects elements whose attributes contain the specified value.
Syntax:
[attribute*="value"] {
property: value;
property: value;
}
Example:
/* Selects all elements where the title attribute contains "middle" */
[title*="middle"] {
color: purple;
}
<p title="This is the middle of the text">This text will be purple.</p>
<p title="No middle here">This text will not be purple.</p>
6.7 Attribute Selector with Whitespace
The attribute selector with whitespace selects elements whose attribute contains one or more values separated by spaces. This is useful for selecting elements with specific classes or roles.
Syntax:
[attribute~="value"] {
property: value;
property: value;
}
Example:
/* Selects all elements where the class attribute contains "highlight" in the list of classes */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight special">This text will have a yellow background.</p>
<p class="special highlight">This text will also have a yellow background.</p>
<p class="special">This text will not have a yellow background.</p>
6.8 Attribute Selector with Hyphen
The attribute selector with a hyphen selects elements whose attribute contains the specified value or starts with the specified value followed by a hyphen.
Syntax:
[attribute|="value"] {
property: value;
property: value;
}
Example:
p[lang|="ru"] {
font-style: italic;
}
<p lang="ru">This text will be italic.</p>
<p lang="ru-RU">This text will also be italic.</p>
<p lang="en">This text will not be italic.</p>
GO TO FULL VERSION