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.