codescracker


css

CSS Attribute Selectors



« Previous Tutorial Next Tutorial »


Here you will learn all about attribute selectors in CSS with examples.

The [attribute] selector is used to select elements with a specified attribute.

CSS [attribute] Selector Example

Let's look at the following example that selects all the <a> elements with a target attribute:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Selector Example</title>
	<style>
		a[target] { background-color:red; color:white; }
	</style>
</head>
<body>

<a href="http://codescracker.com/css/css-attribute-selectors.htm">CSS Attribute Selector</a>
<a href="http://codescracker.com/css" target="_blank">CSS</a>
<a href="http://codescracker.com" target="_top">HOME</a>

</body>
</html>

In the above example, the links with a target attribute gets background colored as red and text as white. Here is the sample output of the above CSS attribute selector example code:

css attribute selector

Here is the live demo output of the above CSS example code on attribute selector:

CSS [attribute=value] Selector

The [attribute=value] selector is used to select elements with a specified attribute and value.

Let's look at the following example, selects all the <a> elements with a target="_blank" attribute:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Value Selector Example</title>
	<style>
		a[target=_blank] { background-color:red; color:white; }
	</style>
</head>
<body>

<a href="http://codescracker.com">codescracker</a>
<a href="http://codescracker.com/css" target="_blank">CSS</a>
<a href="http://codescracker/css/css-attribute-selectors.htm" target="_top">attribute selectors</a>

</body>
</html>

In the above CSS example, the link with target="_blank" gets a red background. Here is the sample output of the above CSS example on attribute value selector:

css attribute value selector

Following is the live demo output produced by the above CSS example code on attribute value selector:

CSS [attribute~=value] Selector

The CSS [attribute~=value] selector is used to select elements with an attribute value containing a specified word.

Let's look at the following example, selects all the elements with a title attribute that contains a space-separated list of words, one of which is "animal":

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Value Selector Example</title>
	<style>
		[title~=bird] { border:3px solid red; }
	</style>
</head>
<body>

<img src="bird1.jpg" title="image1" width="180" height="150">
<img src="bird2.jpg" title="bird" width="180" height="150">
<img src="bird3.jpg" title="amazing bird" width="180" height="150">

</body>
</html>

In the above CSS example, all images with the title attribute containing the word "animal" get a 3px solid red border. Here is the sample output produced by the above CSS example code on attribute value selector:

css attribute selector example

CSS [attribute|=value] Selector

The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.

Let's look at the following example, selects all the elements with a class attribute value that begins with "attributeselect"

Note - The value has to be a whole word, either alone, like class="attributeselect", or followed by a hyphen( - ), like class="attributeselect-text"

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Value Selector Example</title>
	<style>
		[class|=attributeselect] { background:red; color:white; }
	</style>
</head>
<body>

<h2 class="attributeselect-header">This is Main Heading</h2>
<p class="attributeselect-text">Hello Browser!</p>
<p class="attributeselect">This is CSS Attribute Selector Tutorial.</p>
<p class="attributeselectcontent">This is CSS Attribute Selector Example.</p>

</body>
</html>

Here is the sample output of the above CSS attribute value selector example code:

attribute selector example css

CSS [attribute^=value] Selector

The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.

Let's look at the following example that selects all the elements with a class attribute value that begins with "attributeselect"

Note - The value does not have to be a whole word.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Value Selector Example</title>
	<style>
		[class^="attributeselect"] { background:red; color:white; }
	</style>
</head>
<body>

<h2 class="attributeselect-header">CSS Attribute Selector</h2>
<p class="attributeselect-text">This is CSS attribute selector tutorial.</p>
<p class="attributeselectcontent">This is CSS attribute selector example.</p>
<p class="notattributeselectcontent">This is CSS attribute selector test.</p>

</body>
</html>

Below is the sample output of the above CSS [attribute^=value] selector example code:

css attribute value selector example

CSS [attribute$=value] Selector

The [attribute$=value] selector is used to select elements whose attribute value ends with a specified value.

Let's look at the following example which selects all the elements with a class attribute value that ends with "attributeselect"

Note - The value does not have to be a whole word.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Value Selector Example</title>
	<style>
		[class$="attributeselect"] { background:red; color:white; }
	</style>
</head>
<body>

<h2 class="header-attributeselect">CSS Attribute Value Selector</h2>
<p class="text_attributeselect">This is CSS Attribute Value Selector Tutorial</p>
<p class="contentattributeselect">This is CSS Attribute Value Selector Example</p>
<p class="nots">This is CSS Attribute Value Selector Exercise</p>
<p class="attributeselectcontent">This is CSS Attribute Value Selector Test</p>

</body>
</html>

Following is the output produced by the above attribute value selector example code in CSS:

attribute selector css

CSS [attribute*=value] Selector

The [attribute*=value] selector is used to select elements whose attribute value contains a specified value.

Let's look at the following example that selects all the elements with a class attribute value that contains "bok".

Note - The value does not have to be a whole word.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Attribute Selector Example</title>
	<style>
		[class*="bok"] { background:red; color:white; }
	</style>
</head>
<body>

<h2 class="header-bok">CSS Attribute Selector</h2>
<p class="text_bok">CSS attribute selector tutorial</p>
<p class="contentbok">CSS attribute selector example</p>
<p class="nots">CSS attribute selector exercise</p>
<p class="bokcontent">CSS attribute selector test</p>

</body>
</html>

Here is the output of the above CSS attribute selector example code:

attribute value selector css

Styling Forms using CSS Attribute Selector

The attribute selectors can be useful for styling forms without class or ID. Here is an example shows how to style forms using CSS attribute selector:

<!DOCTYPE html>
<html>
<head>
	<title>Styling Forms using CSS Attribute Selectors Example</title>
	<style>
		input[type=text] { width:150px; margin-bottom:5px; 
				background-color:red; color:white; }
		input[type="password"] { background-color:red; color:white;
				width:150px; margin-bottom:5px; }
		input[type=button] { width:100px; margin-left:15px; }
	</style>
</head>
<body>

<form name="input" action="" method="get">
	Username : <input type="text" name="uname" size="20"><br/>
	Password : <input type="password" name="Pass" size="20"><br/>
	<a href="/forgot-pass.php">Forgot Password</a>
	<input type="button" value="LogIn"><br/>
</form>

</body>
</html>

Below is the sample output of the above CSS styling form using attribute selector example code:

style forms using attribute selectors

Here is the live demo output of the above CSS example code to style forms using attribute selector:

Username :
Password :
Forgot Password

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test