22
loading...
Confusing attribute 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
This attribute applies to only those selector which starts with the specified value
Suppose this is the html
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
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.