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.

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

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.