CSS Attribute Selectors
In this article, we will learn about how to use CSS attribute selectors. Using the selectors we can select elements with the specified attributes.
| Selector | Description |
|---|---|
| [attribute] | Select elements with specified attribute. |
| [attribute=value] | Select elements with a specified attribute which have the specified values. |
| [attribute~=value] | Selects element with an attribute value containing the specific word. |
| [attribute|=value] | Selects element with the specified attribute starting with the specified values. Note: Values should be whole word(title=’warning’), or followed by hyphen’-‘ (title=’warning-btn’) |
| [attribute^=value] | Selects element with the specified attribute starting with the specified values. |
| [attribute$=value] | Selects element with the specified attribute ending with the specified values. |
| [attribute*=value] | Selects elements with the attribute whose value is specified substring. |
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button[class] {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
[class = "btn success"]{
background-color: #4CAF50;
}
[class ~= "info"]{
background-color: #2196F3;
}
[class |= "warning"]{
background-color: #ff9800;
}
[class ^= "bton"]{
background-color: #f44336;
}
[class $= "default"]{
background-color: #e7e7e7;
color: black;
}
[class*="btn"] {
background: 5px solid #46a049;
}
.success:hover {background-color: #46a049;}
.info:hover {background: #0b7dda;}
.warning-btn:hover {background: #e68a00;}
.danger:hover {background: #da190b;}
.default:hover {background: #ddd;}
</style>
</head>
<body>
<h1>Alert Buttons</h1>
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="warning-btn">Warning</button>
<button class="bton danger">Danger</button>
<button class="btn default">Default</button>
</body>
</html>Result
