CSS Attribute Selectors
CSS attribute selectors let you style elements based on their attributes. You can target elements with specific attributes or attribute values, making your CSS more flexible without needing extra classes or IDs.
Types of Attribute Selectors
1. [attribute]
This selector targets elements that have a specified attribute, regardless of its value.
Example
Output:
![css-Attribute-Selectors-[attribute]](https://iqratechnology.com/wp-content/uploads/2023/10/css-Attribute-Selectors-attribute-1024x280.png)
In this example:
• The [data-info] attribute selector targets all elements that have the data-info attribute, regardless of its value.
• It applies a blue border and padding to those elements.
• Elements without the data-info attribute, such as the <span> in this example, are not affected by this rule.
2. [attribute="value"]
This selector targets elements with a specified attribute that has a specific value.
Example
<head>
<style>
[type=”button”] {
background-color: green;
color: white;
padding: 10px;
border: none;
}
</style>
</head>
<body>
<input type=”button” value=”Click me!”>
<input type=”text” value=”Not a button”>
</body>
Output:
![css-Attribute-Selectors-[attribute=value]](https://iqratechnology.com/wp-content/uploads/2023/10/css-Attribute-Selectors-attributevalue-1024x305.png)
In this example:
• The [type=”button”] attribute selector targets all elements with type=”button”.
• It applies styles to make the button look green with white text, padded for a better appearance, and without a border.
• Elements with other type attributes, like type=”text”, are not affected by this rule and will retain their default styles.
3. [attribute~="value"]
This selector targets elements with a specified attribute that contains a specific value as one of its space-separated values.
Example
<head>
<style>
/* Selects elements with the ‘class’ attribute containing the word ‘highlight’ */
[class~=”highlight”] {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class=”highlight important”>This div is highlighted.</div>
<p class=”important”>This paragraph is not highlighted.</p>
</body>
Output:
![css-Attribute-Selectors-[attribute~=value]](https://iqratechnology.com/wp-content/uploads/2023/10/css-Attribute-Selectors-attributevalue-1-1024x256.png)
In this example:
• The [class~=”highlight”] attribute selector targets any element with a class attribute containing the word “highlight”.
• Elements with the highlight class will have a yellow background and some padding, making them stand out.
• Elements that do not have the highlight class are not affected by this rule and will appear with their default styling.
4. [attribute^="value"]
This selector targets elements with a specified attribute that starts with a specific value.
Example
<head>
<style>
/* Selects elements with the ‘id’ attribute starting with ‘item-‘ */
[id^=”item-“] {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div id=”item-001″>Item 001</div>
<div id=”item-002″>Item 002</div>
<div id=”product-001″>Product 001</div>
</body>
</html>
Output:
![css-Attribute-Selectors-[attribute^=value]](https://iqratechnology.com/wp-content/uploads/2023/10/css-Attribute-Selectors-attribute^value-1024x294.png)
In this example:
• The [id^=”item-“] attribute selector targets any element with an id attribute that begins with “item-“.
• These elements will be styled with a red border and 10 pixels of padding.
• Elements with id attributes that do not start with “item-” will not be affected by this CSS rule and will appear with their default styling.
5. [attribute$="value"]
This selector targets elements with a specified attribute that ends with a specific value.
Example
<head>
<style>
[href$=”.pdf”] {
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<a href=”document1.pdf”>Download PDF 1</a>
<a href=”document2.docx”>Download DOCX 2</a>
<a href=”document3.pdf”>Download PDF 3</a>
</body>
Output:
In this example:
• The [href$=”.pdf”] attribute selector targets any anchor (<a>) element with an href attribute that ends with “.pdf”.
• These elements will have their text color changed to green and will be underlined.
• Anchor elements with href attributes that do not end in “.pdf” will not be affected by this rule and will display with their default styling.
6. [attribute*="value"]
This selector targets elements with a specified attribute that contains a specific value anywhere in the attribute’s value.
Example
<head>
<style>
/* Selects elements with the ‘title’ attribute containing ‘info’ */
[title*=”info”] {
background-color: lightgray;
padding: 5px;
}
</style>
</head>
<body>
<div title=”information”>This div has ‘info’ in its title attribute.</div>
<div title=”data”>This div does not have ‘info’ in its title attribute.</div>
</body>
Output:
In this example:
• The [title*=”info”] attribute selector applies styles to elements whose title attribute contains the substring “info”.
• These elements will have a light gray background and 5 pixels of padding.
• Elements without “info” in their title attribute are not affected by this rule and will display with their default styles.
Conclusion
CSS attribute selectors provide a flexible way to target and style elements based on their attributes. Whether you’re looking to style elements based on the presence of attributes or specific values, attribute selectors can help you create more dynamic and context-specific styles.
Course Video
YouTube Reference :
Practice Scenarios
1. [attribute] Selector
Scenario: Style all input elements with a type attribute.
Objective: Apply a border to all input elements that have any type attribute.
Output:
![[attribute] Selector](https://iqratechnology.com/wp-content/uploads/2023/10/attribute-Selector.png)
2. [attribute="value"] Selector
Scenario: Style only the email input field.
Objective: Apply a background color to the input element where type=”email”.
Output:
3. [attribute~="value"] Selector
Scenario: Style elements with a specific word in their attribute value.
Objective: Apply a different color to any input elements with the word “text” in their type attribute.
Output:
![[attribute~=value] Selector](https://iqratechnology.com/wp-content/uploads/2023/10/attributevalue-Selector-1.png){kind=small}
4. [attribute|="value"] Selector
Scenario: Style elements where the attribute value starts with a specific word.
Objective: Apply styling to any input elements with a type attribute that starts with “text”, including “text” or “textual”.
Output:
5. [attribute^="value"] Selector
Scenario: Style elements where the attribute value begins with a specific sequence.
Objective: Apply a border to any input elements where the type attribute starts with “pass”.
Output:
6. [attribute$="value"] Selector
Scenario: Style elements where the attribute value ends with a specific sequence.
Objective: Apply a specific style to any input elements where the type attribute ends with “word”.
Output:
![[attribute$=value] Selector](https://iqratechnology.com/wp-content/uploads/2023/10/attributevalue-Selector-2.png){kind=small}
7. [attribute*="value"] Selector
Scenario: Style elements where the attribute value contains a specific sequence anywhere in its value.
Objective: Apply a background color to any input elements where the type attribute contains “pass”.
Output:
