The power of CSS3 selectors

CSS selectors are very powerful and come in handy when formatting an HTML document. Using selectors is sometimes tricky, as selecting exactly what you want, and then ensuring that the style rules applied are affecting just the elements that you intended, is a tedious mission. But when done properly with the right selectors, the outcome is very rewarding. Mastering the use of selectors will result in a less complex CSS, minimizing the probability of having redundant styles and over-defining the HTML with classes and IDs, thus ensuring a better performance. The selector can simply be an HTML element, a class, an element ID, or it can even be the element's position in the DOM.

The following is a list of CSS selectors; we will start with the basics and get to the new selectors introduced in CSS3:

• The asterisk (*) symbol: This is the catch-all selector, called the universal type selector, and is used to target every element in the document. It is often used with CSS...