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
