Skip to content

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.

[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.


<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">

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;}

<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>



See also  Import CSS files using @import in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.