CSS3 Attribute Selectors


a[title^="google"] {
   text-decoration: underline;
   color:blue;
}

This example matches a elements that have a title attribute value which starts with the characters "google". Even though the title is Google link, it will scan for the first letter of the title and see if it matches GOOGLE

Using the (dollar) $= operator, an attribute selector looks for the values that end with the specified value show below: This image ends with a jpg

img[src$="150.jpg"]  {
  border: 5px solid red;
}

And I use this one sometimes, gets everything but it might take a lot of resources (asterik) *= operator to make an attribute selector match elements that contains anything with the specified value:

This is the div with a class called coolbeans
div[class*="beans"] {
    font-size: 30px;
    font-weight: 700;
}

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.