Useful HTML5 Features, Part 5
CSS-like JavaScript selectors HTML5 brought us CSS-like JavaScript selectors and they have a pretty decent support. This is really handy and was one of the main benefits of the jQuery library. The lengthy JavaScript selectors such asdocument.getElementsByClassName("container")[0].getElementsByTagName("p")[0] are on the way to history.
Browser support
The following browsers support the querySelector property:
- IE8 has partial support
- IE9+ supports it fully.
- Firefox 31+
- Chrome 31+
- Safari 7+
- Opera 29+
Generally, it is supported by 96.92% of the Internet users out there so you can decide to use it without any fallbacks (statistics can be found in Can I Use).
Examples
First, we add some basic markup:
<body>
<div class="container">
<div>
<p>Retrieve me!</p>
<p>Get it!</p>
</div>
</div>We can use querySelector and querySelectorAll. querySelector returns the first element that matches the given string with a CSS selector while querySelectorAll returns us all elements that match the CSS selector.
var gotIt = document.querySelector(".container p");
//logs the first found paragraph - this is Retrieve me!
console.log(gotIt);
If we did not use querySelector and wanted to get that paragraph (which does not have a class on its own) we would have to type something like: document.getElementsByClassName("container")[0].getElementsByTagName("p")[0]… What a relief!
If we want to get both (all) paragraphs with the div with class of container we could use:
var gotThem = document.querySelectorAll(".container div p");
//logs both paragraphs
console.log(gotThem);
Cool things you can do with CSS3 attribute selectors
We are going to show you how you can easily add an image or text to a link indicating that it is a .pdf, .doc file or whatever you like. We are also going to show how you can signal the users that a particular link will move them away from your website.
In our markup, we have a div with links:
<div class="random-links">
<a href="1.pdf">A book on the Evolution</a>
<a href="2.doc">A brief history of mankind</a>
<a href="doc3.pdf">Are Dinosaurs Real?</a>
<a href="pdf4.doc">What do men know about women
<a href="pdf4.docx">What do men know about women
<a href="https://www.phpgang.com">PHPGang</a>
<a href="/folder/file.html"></a>
</div>
Firstly, we will add a .pdf icon to the links that lead to a .pdf file:
a[href$='.pdf']:after {
content: url("pdf.png");
padding: 5px;
padding-bottom: 15px;
}
a[href$='.pdf'] is instructing the browser to search for anchors which have a href attribute whose value ends with .pdf. $= followed by text searches the attribute for a value that ends with the provided text.
We have used the :after pseudo-element and its feature content to add an image to the end of each matched anchor.
Let us repeat the process with the files that end with .doc:
a[href$='.doc']:after {
content: url("word.png");
padding: 5px;
padding-bottom: 15px;
}
If you see the links now you will see that <a href="pdf4.docx">What do men know about women</a> does not have a Microsoft Word icon. This is because it does not end with .doc, it ends with .docx.
Now, to add an external icon to the websites pointing to other domains we would have to use another attribute selector that seeks the beginning of an attribute for a certain value: ^=.
a[href^='http']:before {
content: url("external.png");
padding: 5px;
padding-bottom: 15px;
}
This searches for any anchor with a href attribute that starts with http (it could be http:// or https://). Notice also that this time we insert the icon before the content of the anchor itself with the :before pseudo-element.
Here is what we end up with:
Conclusion
I hope you found the today’s piece of HTML5 useful indeed. If you found this article interesting or you have questions, do not hesitate to write a comment. I will be glad to reply to any enquiries.
Tutorial Categories:
Great article