CSS Attribute Selector
- Introduction to CSS attributes
- Different type of CSS attribute selectors with syntax and simple example
Introduction to CSS Attribute Selector
CSS provides you, the ability to design elements according to attribute and attribute values. That is, an element can be targeted which has not defined specific attribute or attribute values. For this, many CSS attribute selectors are available in CSS.
As you can understand by the name only, CSS attribute selector select attributes of an element. The element whose attribute matches the attribute selector, the same element is targeted.
For example, if you want to target all the anchor tags on a webpage for which the target attribute has been defined and that attribute has been defined as value _blank, so you can not do it by the normal CSS selectors. But it is very easy to do this by attribute selectors. Let us now try to know all about the attribute selector in detail by CSS.
Different type of CSS Attribute Selector
This CSS selector targets such HTML elements in which the attribute defined in the angular brackets. The general syntax of this CSS attribute selector has been given below.
[attribute-name]
{
property: value;
}
As you can see in the above syntax, The attribute you want to match is defined in angular brackets. The example of this selector has been given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
[target]
{
background-color: hotpink;
}
</style>
</head>
<body>
<a href="https://www.mybloghelp.com" target="_blank"> MyBlogHelp </a><br>
<a href="http://www.google.com"> Google </a><br>
<a href="http://www.yahoo.com" target="_top"> Yahoo </a>
<style>
[target]
{
background-color: hotpink;
}
</style>
</head>
<body>
<a href="https://www.mybloghelp.com" target="_blank"> MyBlogHelp </a><br>
<a href="http://www.google.com"> Google </a><br>
<a href="http://www.yahoo.com" target="_top"> Yahoo </a>
</body>
</html>
The above example will produce the below output.
CSS [attribute = "value"] Selector
This CSS selector targets such HTML elements in which the attribute specified in the angular bracket and its same value is defined. In this selector, the value of the attribute is also defined by the assignment operator before its name.
When defining this selector, the value of the attribute is defined in double quotes. The general syntax of this selector has been given below.
[attribute-name = "value"]
{
property: value;
}
This attribute selector only affects those elements, whose attribute and the value defined for it matches exactly. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
body{
width: 25%;
}
[class = "p1"]
{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<p class = "p1"> This the paragraph which background and color will be changed. </p>
<p> This paragraph will not be changed. </p>
<style>
body{
width: 25%;
}
[class = "p1"]
{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<p class = "p1"> This the paragraph which background and color will be changed. </p>
<p> This paragraph will not be changed. </p>
</body>
</html>
The above example will produce the below output.
CSS [attribute ~ = "value"]
This CSS attribute selector targets such HTML elements, which contain the word specified in the attribute's value. When defining this selector, the tilde (~) symbol is defined after the name of the attribute and after that by assigning the assignment operator, that word is specified in double quotes which can be included in the value of an element.
For example, if you want to target some div in which the class attribute is defined and the value of that attribute includes fruits and flowers word, then in this situation, you can use this selector.
The general syntax of this selector has been given below.
[attribute-name = "contain-word"]
{
property: value;
}
The example of this selector has been given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
[class~="Fruit"]
{
width: 200px;
height: 100px;
background-color: green;
border: 3px solid red
}
[class~="Flower"]
{
width: 200px;
height: 100px;
background-color: yellow;
border: 3px solid blue;
}
</style>
</head>
<body>
<div class="Div1 Fruit"> This is div1. <img src="fruit1.jpg" style="float: right;width: 50px;"> </div>
<div class="Div2 Flower"> This is div2. <img src="flower1.jpg" style="float: right;width: 50px;"> </div>
<div class="Div3 Fruit"> This is div3. <img src="fruit2.jpg" style="float: right;width: 50px;"> </div>
<div class="Div4 Flower"> This is div4. <img src="flower2.png" style="float: right; width: 50px;"> </div>
<style>
[class~="Fruit"]
{
width: 200px;
height: 100px;
background-color: green;
border: 3px solid red
}
[class~="Flower"]
{
width: 200px;
height: 100px;
background-color: yellow;
border: 3px solid blue;
}
</style>
</head>
<body>
<div class="Div1 Fruit"> This is div1. <img src="fruit1.jpg" style="float: right;width: 50px;"> </div>
<div class="Div2 Flower"> This is div2. <img src="flower1.jpg" style="float: right;width: 50px;"> </div>
<div class="Div3 Fruit"> This is div3. <img src="fruit2.jpg" style="float: right;width: 50px;"> </div>
<div class="Div4 Flower"> This is div4. <img src="flower2.png" style="float: right; width: 50px;"> </div>
</body>
</html>
The above example will produce the below output.
CSS [attribute | = "value"] Selector
This CSS selector targets such elements where the value of the attribute specified in the angular brackets starts with the specified word. After the name of the attribute in the selector, the vertical (|) line symbol is defined and then it is written the word in double quotes which you want to match the attribute’s value.
It is important to keep in mind that the word should be complete. If you define the attribute, and the hyphen is used before, also hyphen should be applied before the word. If you do not write a complete word, you will not be able to target any element.
For example, if you want to select such a paragraph element whose value of class attribute starts with first, then you can do this by the selector. The general syntax of this selector has been given below.
[attribute-name | = "containing-word"]
{
property: value;
}
The example of this selector is being given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
[class|="First"]
{
color: blue;
background: pink;
}
[class|="Second"]
{
color: red;
background: yellow;
}
[class|="Third"]
{
color: green;
background: lime;
}
</style>
</head>
<body>
<p class = "First-Paragraph"> This is the first paragraph. </p>
<p class = "Second-Paragraph"> This is second paragraph. </p>
<p class = "Third-Paragraph"> This is third paragraph. </p>
</body>
<style>
[class|="First"]
{
color: blue;
background: pink;
}
[class|="Second"]
{
color: red;
background: yellow;
}
[class|="Third"]
{
color: green;
background: lime;
}
</style>
</head>
<body>
<p class = "First-Paragraph"> This is the first paragraph. </p>
<p class = "Second-Paragraph"> This is second paragraph. </p>
<p class = "Third-Paragraph"> This is third paragraph. </p>
</body>
</html>
The above example will produce the below output.
CSS [attribute ^ = "value"] Selector
This CSS selector also targets such elements which value of the attribute specified, starts with the specified word. The only difference is that in this selector you do not need to define the complete word. This means even if define some letters, then it targets selectors elements.
When defining this selector, Circumflex (^) accent symbol is defined after the name of the attribute, and after assignment operator, the word is written in double quotes that you want to match the attribute’s value.
The general syntax of this selector has been given below.
[attribute-name ^ = "contain-word"]
{
property: value;
}
The example of this selector has been given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
body{
width: 25%;
}
[class^="best"]
{
color: blue;
background: #ccc;
}
</style>
</head>
<body>
<p class="best-design"> This is paragraph about best designing. </p>
<p class="best-color"> This is a paragraph about best color. </p>
<p class="best-content"> This is a paragraph about best content. </p>
<style>
body{
width: 25%;
}
[class^="best"]
{
color: blue;
background: #ccc;
}
</style>
</head>
<body>
<p class="best-design"> This is paragraph about best designing. </p>
<p class="best-color"> This is a paragraph about best color. </p>
<p class="best-content"> This is a paragraph about best content. </p>
</body>
</html>
The above example will produce the below output.
CSS [attribute $ = "value"] Selectors
This CSS selector targets such elements which have been specified as the value of the attribute ends the specified word.
When defining this selector, the dollar ($) symbol is defined after the name of the attribute and after assignment (=) operator, the word is defined in the double quotes which you want to match the attribute value. It is not necessary that the word is complete.
The general syntax of this selector has been given below.
[attribute-name $ = "value"]
{
property: value;
}
The example of this selector has been given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
body{
width: 25%;
}
[class$="ing"]
{
color: blue;
background: yellow
}
[class$="graph"]
{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<h3 class="first-heading">This is the first heading</h3>
<p class = "first-paragraph"> This is the first paragraph </p>
<h3 class="second-heading">This is the second heading</h3>
<p class = "second-paragraph"> this is the second paragraph </p>
<h3 class="third-heading">This is the third heading</h3>
<p class = "third-paragraph"> This is the third paragraph </p>
<h3 class="fourth-heading">This is the fourth heading</h3>
<p class = "fourth-paragraph"> This is fourth paragraph </p>
<style>
body{
width: 25%;
}
[class$="ing"]
{
color: blue;
background: yellow
}
[class$="graph"]
{
color: green;
background-color: pink;
}
</style>
</head>
<body>
<h3 class="first-heading">This is the first heading</h3>
<p class = "first-paragraph"> This is the first paragraph </p>
<h3 class="second-heading">This is the second heading</h3>
<p class = "second-paragraph"> this is the second paragraph </p>
<h3 class="third-heading">This is the third heading</h3>
<p class = "third-paragraph"> This is the third paragraph </p>
<h3 class="fourth-heading">This is the fourth heading</h3>
<p class = "fourth-paragraph"> This is fourth paragraph </p>
</body>
</html>
The above example will produce the below output.
CSS [attribute * = "value"] Selector
This attribute selector targets such elements whose are specified the value of the attribute with the specified word. It's the same as selector [attribute = "value"] selector. The only difference is that you do not need to specify the exactly complete value.
You can only define some of the letters, which will match the attribute's value, the same element will be the target.
When defining this selector, the asterisk (*) symbol is defined after the name of the attribute, and after assignment (=) operator, the word is specified in double quotes which you want to match.
The general syntax of this selector has been given below.
[attribute-name * = "contain-word"]
{
property: name;
}
The example of this selector is being given below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Attribute Selectors</title>
<style>
body{
width: 25%
}
[class*="ing"]
{
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h3 class = "heading-first"> This is the first heading. </h3>
<p class = "first-paragraph"> This is the first paragraph. </p>
<h3 class = "heading-second"> This is the second heading. </h3>
<p class = "second-paragraph"> This is the second paragraph. </p>
</body>
</html>
The above example will produce the below output.
Excellent post, thanks for this. I gathered lots of information from this and I am happy about it. Do share more updates.
ReplyDeletePHP Training in Chennai
Best PHP Training Institute in Chennai
PHP Institute in Chennai
Angular Training in Chennai
Web Designing Training in Chennai
Salesforce Training in Chennai
Tally course in Chennai
PHP Training in Anna Nagar
PHP Training in Vadapalani
PHP Training in Thiruvanmiyur