I find some attribute selectors sometimes confusing. Here is the three attribut selector I find confusing. This article will help those who also have confusion about these attribute selectors.
1. [attribute ~= "value"] Selector
Suppose we have html code like this:
<p class="team1 member">First Paragraph</p>
<p class="team2 member">Second Paragraph</p>
<p class="team3">Third Paragraph</p>
If i use the above selector in CSS, it looks like this
p[class ~="member"] {
background-color: red;
}
The above CSS only will be applied on The first 2 paragraph element, Because "member" is one of the class of the p element. There may be more than one class or only one class. NO matter what this rule works
2. [attribute |= "value"] Selector
This attribute applies to only those selector which starts with the specified value
Suppose this is the html
<p class="member-team">First Paragraph</p>
<p class="member first">Second Paragraph</p>
<p class="team3">Third Paragraph</p>
and now we use css
p[class |="member"] {
background-color: red;
}
Above CSS applies to only first and third paragraph element. Because Value has to alone or there should be a hypen after the value. Only then selector will match
2. [attribute *= "value"] Selector
In the case of this selector it doens't matter where the value is .It may be at the beggining, at the endign , in the middle or the value may be part of a long word. No matter what if the value exists, this selector will match.
Top comments (0)