Please note, this is a STATIC archive of website www.w3resource.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
w3resource

CSS attribute selectors

 

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" "https://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" "https://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" "https://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" "https://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