CSS attribute selectors

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

Attribute selectors

CSS attribute selectors describe styles those are applicable to matching attributes or attribute values ( full or partially ) of elements of an HTML page.

Types of attribute selectors

Types	Descriptions
[attribute]	Selects element(s) with a matching attribute name.
[attribute="value"]	Selects element(s) with a matching attribute value.
[attribute~="value"]	Selects element(s) whose attribute name and one of the words out of a white space-separated list of words is matching, where the list of the whitespace separated words is the value of the attribute. If "value" is either a white space or an empty string, it does not select anything.
[attribute\|=val]	Selects element(s) whose attribute name is matching, and attribute value is either same as "val" or started with "val" and immediately followed by "-" ( i.e. hyphen ). This is meant to be used to select elements with language sub-code (e.g. en-US) .

Syntax of CSS [attribute] attribute selector

[name_of_the_attribute]   { CSS-Property: value; ........................ }

Note

For all of the CSS attribute selectors, enclosing the selector with "[" and "]" is the must.

Example of CSS [attribute] attribute selectors

CSS code:

[title] {
color: red; /* sets color to red */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute] attribute selectors</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="example of CSS attribute selector"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title=" CSS attribute selector">CSS attribute Selector</a>
</div>
</body>
</html>

View this example of CSS [attribute] attribute selector in a separate browser window.

Syntax of CSS [attribute="value"] attribute selector

[name_of_the_attribute="value_of_the_attribute"]   { CSS-Property: value; ........................ }

Example of CSS [attribute="value"] attribute selectors

CSS code:

 [title="w3resource"] {
color: red; /* sets color to red */ 
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute="value"] attribute selectors</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="w3resource"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title="w3resource">CSS attribute Selector</a>
<a href="css/selector/CSS-selectors.php" title="w3resource CSS selector ">CSS Selector</a> <!--this element is not going to be selected, since the value of teh attribute does not match-->
</div>
</body>
</html>

View this example of CSS [attribute="value"] attribute selectorin a separate browser window.

Syntax of CSS [attribute~="value"] attribute selector

[name_of_the_attribute=~"value"]   { CSS-Property: value; ........................ }

Where, the value of the attribute of the selected element is a white space separated list of words, and one of the words matches value.

Example of CSS [attribute~="value"] attribute selector

CSS code:

 [title~="w3resource"] {
color: red; /* sets color to red */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute~="value"] attribute selector</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute~=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p title="w3resource tutorials "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<a href="css/selector/CSS-attribute-selector.php" title="w3resource CSS tutorials ">CSS attribute Selector</a>
<a href="css/selector/CSS-selectors.php" title="CSS selector tutorials ">CSS Selector</a> <!--this element is not going to be selected, since any of teh words does not match w3resource-->
</div>
</body>
</html>

View this example of CSS [attribute~="value"] attribute selector in a separate browser window.

Syntax of CSS [attribute|="value"] attribute selector

[name_of_the_attribute|="value"]   { CSS-Property: value; ........................ }

Where the value of the attribute of the selected element is a starts with value and immediately followed by "_".

Example of CSS [attribute|="value"] attribute selector

CSS code:

[lang|="en"] {
color: red; /* sets color to red */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS [attribute|="value"] attribute selector</title>
<link rel='stylesheet' href='Example-of-CSS-[attribute|=value]-attribute-selector.css' type='text/css'>
</head>
<body>
<p lang="en-US" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
<p lang="fr">Ce paragraphe est en français.</p><!--this is going to be hidden--> 
</div>
</body>
</html>

View this example of CSS [attribute|="value"] attribute selector in a separate browser window.

Previous: CSS adjacent sibling selectors
Next: CSS class selectors