Today, I am going to introduce you three new Attribute Selectors in CSS3 which provide us more flexibility for matching substrings in an attribute value with some examples. With three of these, we can match strings at the start, end, or anywhere within an attribute value.
You might not have a basic idea about Attribute Selectors unless you know HTML/CSS well. So, I recommend you to watch a YouTube video about CSS2 Attribute Selectors by SitePoint first, which explains well about four attribute selectors introduced in CSS2 and their usages.
CSS3 Beginning Substring Attribute Value Selectors
e[att^='value'] { declarations here.... }
This selector matches the elements which have an attribute containing a value that starts with the specific value.
CSS3 Any Substring Attribute Value Selectors
e[att*='value'] { declarations here.... }
This selector matches the elements which have an attribute containing at least one occurrence of string “value” as substring.
CSS3 Ending Substring Attribute Value Selectors
e[att$='value'] { declarations here.... }
This selector matches the elements which have an attribute containing a value that ends with the specific value.
Note :
- e stands for elements such as p, a, img, div and more.
- att stands for attributes like class, id, title, rel, cite, href, alt and more.
- value stands for attribute values
These selectors can be used to make various css effects/ functions to the elements according to your creativity and needs. However, I will mainly show some examples where you can use them to decorate or add visual information to hyperlinks.
Beginning Substring Attribute Value Selectors
Here are the typical hyperlink HTML codes linking to an external website, email address and FTP server .
This is a sample <a href="http://www.bloggermint.com">hyperlink</a>. This is a sample <a href="mailto:bloggermint@gmail.com">bloggermint@gmail.com</a>. This is a sample <a href="ftp://bloggermint.com">FTP Server</a>.
Since the starting value for the attribute href are http://, ftp:// and mailto: , we can use Beginning Substring Attribute Value Selector to prettify respective link.
a[href^='http'] {
background: url(images/link.png) no-repeat left;
padding-left:20px;
}
a[href^='mailto'] {
background: url(images/email.png) no-repeat left;
padding-left:20px;
}
a[href^='ftp'] {
background: url(images/folder.png) no-repeat left;
padding-left:20px;
}
Here are the results of using those codes.
This is a sample hyperlink.
This is a sample bloggermint@gmail.com.
This is a sample ftp://bloggermint.com.
Ending Substring Attribute Value Selectors
Here are the typical hyperlink HTML codes linking to the files with extensions like pdf, png and more.
This is a sample <a href="http://www.bloggermint.com/document.pdf">PDF document</a>. This is a sample <a href="http://www.bloggermint.com/image.png">PNG image</a>. This is a sample <a href="http://www.bloggermint.com/image.jpg">JPG image</a>.
Since the ending value for the attribute href are .pdf, .png and .jpg ,we can use Ending Substring Attribute Value Selector to link.
a[href$='.pdf'] {
background: url(images/pdf.png) no-repeat left;
padding-left:30px;
}
a[href$='.png'] {
background: url(images/png.png) no-repeat left;
padding-left:30px;
}
a[href$='.jpg'] {
background: url(images/jpeg.png) no-repeat left;
padding-left:30px;
}
Here are the results of using those codes.
This is a sample PDF document.
This is a sample PNG image.
This is a sample JPG image.
Any Substring Attribute Value Selectors
The third type of CSS3 Substring Attribute Value selector works similar like both selectors shown in above examples. However, the advantage of using it is that it searches automatically for the specified Substring Value like .doc anywhere within the Attribute Value, locates it and applies specific effect to it.
Here are the typical hyperlink HTML codes linking to files with extensions .doc , .js , and .rar .
This is a sample <a href="http://www.bloggermint.com/word.doc?somewordhere">Word Document</a>. This is a sample <a href="http://www.bloggermint.com/script.js?somewordhere">Javascript</a>. This is a sample <a href="http://www.bloggermint.com/compressed.rar?somewordhere">RAR File</a>.
Since we want to select the URLs containing the required file extensions as value of the attribute href , we can use Any Substring Attribute Value Selector to prettify respective links.
a[href*='.doc'] {
background: url(images/file_doc.png) no-repeat left;
padding-left:25px;
}
a[href*='.rar'] {
background: url(images/file_rar.png) no-repeat left;
padding-left:25px;
}
a[href*='.js'] {
background: url(images/file_js.png) no-repeat left;
padding-left:25px;
}
Here are the results of using those codes.
This is a sample Word Document.
This is a sample Javascript.
This is a sample RAR File.
You may use these selectors for other elements (eg: p, input, h1, h2, img, etc..) or with different attributes like src, cite, alt, class, id, title and many more. You can post your questions or suggestions related to this topic down here in the comments. Happy exploring CSS3!
