Attribute selectors

Attributes based selectors are used when there is a need to apply styles to elements that share specific attributes.

There are four ways to match an attribute within an attribute selector. These are:

[att] -> matches given attribute regardless of its value;
[att=val] -> matches given attribute whose value is equal to the one in the selector;
[att~=val] -> matches given attribute whose value is a white space separated list of words, one of which is equal to the value in the selector;
[att|=val] -> matches given attribute whose value either begins with the value in the selector or begins with the same value followed by "-"; this type of a selector is primarily intended for the attributes used in language declarations such as hreflang.

Example

CSS attribute selectors without class and id attributes example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
[title] {
	padding:3px;
	background-color:#ddd;
}
p[title=pa] {
	color:green;
}
p[title~=para] {
	color:red;
}
p[lang|=fr] {
	direction:rtl;
}
</style>
</head>
<body>

<div>

<h4>Following examples show all 4 sub-types of attribute related selectors</h4>
<p title="pa">[att]: <i>matches all elements with title attribute</i></p>
<p title="par">[att=val]: <i>matches a paragraph with title attribute and value "pa"</i></p>
<p title="para">[att~=val]: <i>matches any paragraph with title attribute including word "para"</i></p>
<p lang="fr">[att|=val]: <i>matches a paragraph with lang attribute that starts with word "fr"</i></p> 

</div>

</body>
</html>

›› go to examples ››

Attribute selectors

Example

CSS attribute selectors without class and id attributes example:

Comments

About

Contact

Get Connected