The 30 CSS Selectors you Must Memorize (part-one)

So you learned the base id, class, and descendant selectors - and then called it a day? If so, you're missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

It’s great that you’re learning web fundamentals, but if you need a quick solution than a professional CSS template might be something to consider. Otherwise, grab a cup of coffee, and dig into studying these selectors.

Let's knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.
The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.
The * can also be used with child selectors.

              

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

Ask yourself: do I absolutely need to apply an id to this element in order to target it?

id selectors are rigid and don't allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera 

This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find a needle-in-a-haystack, and style only that specific element.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

The next most comment selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector.

Pro-tip - If your selector looks like X Y Z A B.error, you're doing it wrong. Always ask yourself if it's absolutely necessary to apply all of that weight.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

What if you want to target all elements on a page, according to their type, rather than an id or classname? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

We use the :link pseudo-class to target all anchors tags which have yet to be clicked on.
Alternatively, we also have the :visited pseudo class, which, as you'd expected, allows us to apply specific styling to only the anchor tags on the page which have been clicked on, or visited.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific? Well...

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

Continue.........