Attribute selectors in CSS3

Selector are explained in previous tutorial. In this attribute selectors well be discussed deeply.There are some example with source code and deep explanation. Hope you will enjoy it.

The simple attribute selector

The simple attribute selector is used to target the specified element and in simple attribute selector, value of attribute is not used. An example of the simple target selector is given with source code.

<style type="text/css">
p[class] {
background: yellow;
color: blue;
padding: 10px;
width: 250px;
border: 2px solid grey;
}
</style>

<p class="text">
 This is a paragraph.
</p>

Output of above code

This is a paragraph.


The exact attribute value selector

The exact attribute value selector is used to target the specified element having exact value which is targeted. An example of the exact attribute value selector is given with source code.

<style type="text/css">
p[class="text"] {
background: orange;
color: blue;
padding: 10px;
width: 250px;
border: 2px solid grey;
}
</style>

<p class="text">
 This is a paragraph.
</p>

Output of above code

This is a paragraph.


The partial attribute value selector

The partial attribute value selector is used to target the any part of the value which is targeted.Here is an example of the partial attribute value selector is given source code.

<style type="text/css">
p[class~="text"] {
background: orange;
color: blue;
padding: 10px;
width: 250px;
border: 2px solid grey;
}
</style>

<p class="text">
 This is a paragraph.
</p>

Output of above code

This is a paragraph.


The hyphen-separated attribute value selector

The hyphen-separated attribute value selector is used to target the the elements which is separated with hyphen.Here is an example of The hyphen-separated attribute value selector is given source code.

<style type="text/css">
*[hreflang|="en"] {
background: grey;
color: blue;
padding: 10px;
width: 250px;
border: 2px solid black;
}
</style>

<a href="#" hreflang="en">
 This is a link
</a>

Output of above code








The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.