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;
}

 

Share on FacebookShare on Google+Pin on PinterestShare on RedditTweet about this on TwitterShare on TumblrShare on LinkedInEmail this to someonePrint this page

Leave a Reply