The 30 CSS Selectors you Must Memorize

Posted by Suresh Devaraj

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/


1. *

view plaincopy to clipboardprint?
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

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.

view plaincopy to clipboardprint?
  1. #container * {
  2. border: 1px solid black;
  3. }

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if ever.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

view plaincopy to clipboardprint?
  1. #container {
  2. width: 960px;
  3. margin: auto;
  4. }

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.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

view plaincopy to clipboardprint?
  1. .error {
  2. color: red;
  3. }

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.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

view plaincopy to clipboardprint?
  1. li a {
  2. text-decoration: none;
  3. }

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.

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

view plaincopy to clipboardprint?
  1. a { color: red; }
  2. ul { margin-left: 0; }

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

View Demo

Compatibility

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

view plaincopy to clipboardprint?
  1. a:link { color: red; }
  2. a:visted { color: purple; }

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.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

view plaincopy to clipboardprint?
  1. ul + p {
  2. color: red;
  3. }

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.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

view plaincopy to clipboardprint?
  1. div#container > ul {
  2. border: 1px solid black;
  3. }

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.

view plaincopy to clipboardprint?
  1. <div id="container">
  2. <ul>
  3. <li> List Item
  4. <ul>
  5. <li> Child li>
  6. ul>
  7. li>
  8. <li> List Item li>
  9. <li> List Item li>
  10. <li> List Item li>
  11. ul>
  12. div>

A selector of #container > ul will only target the uls which are direct children of the div with an id ofcontainer. 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.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

view plaincopy to clipboardprint?
  1. ul ~ p {
  2. color: red;
  3. }

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.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

view plaincopy to clipboardprint?
  1. a[title] {
  2. color: green;
  3. }

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

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

view plaincopy to clipboardprint?
  1. a[href="http://net.tutsplus.com"] {
  2. color: #1f6053; /* nettuts green */
  3. }

The snippet above will style all anchor tags which link to http://net.tutsplus.com; they’ll receive our branded green color. All other anchor tags will remain unaffected.

Note that we’re wrapping the value in quotes. Remember to also do this when using a JavaScript CSS selector engine. When possible, always use CSS3 selectors over unofficial methods.

This works well, though, it’s a bit rigid. What if the link does indeed direct to Nettuts+, but, maybe, the path isnettuts.com rather than the full url? In those cases we can use a bit of the regular expressions syntax.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

view plaincopy to clipboardprint?
  1. a[href*="tuts"] {
  2. color: #1f6053; /* nettuts green */
  3. }

There we go; that’s what we need. The star designates that the proceeding value must appear somewherein the attribute’s value. That way, this covers nettuts.com, net.tutsplus.com, and even tutsplus.com.

Keep in mind that this is a broad statement. What if the anchor tag linked to some non-Envato site with the string tuts in the url? When you need to be more specific, use ^ and &, to reference the beginning and end of a string, respectively.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

view plaincopy to clipboardprint?
  1. a[href^="http"] {
  2. background: url(path/to/external/icon.png) no-repeat;
  3. padding-left: 10px;
  4. }

Ever wonder how some websites are able to display a little icon next to the links which are external? I’m sure you’ve seen these before; they’re nice reminders that the link will direct you to an entirely different website.

This is a cinch with the carat symbol. It’s most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above.

Notice that we’re not searching for http://; that’s unnecessary, and doesn’t account for the urls that begin with https://.

Now, what if we wanted to instead style all anchors which link to, say, a photo? In those cases, let’s search for the end of the string.

View Demo

Compatibility

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

view plaincopy to clipboardprint?
  1. a[href$=".jpg"] {
  2. color: red;
  3. }

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we’re searching for all anchors which link to an image — or at least a url that ends with .jpg. Keep in mind that this certainly won’t work for gifs and pngs.

View Demo

Compatibility

  • IE7+
  • Firefox

There we go; that fixes it!

View Demo

Compatibility

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Yep - IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

view plaincopy to clipboardprint?
  1. div p:only-child {
  2. color: red;
  3. }

Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it.

It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored, red.

Let's assume the following markup.

view plaincopy to clipboardprint?
  1. <div><p> My paragraph here. p>div>
  3. <div>
  4. <p> Two paragraphs total. p>
  5. <p> Two paragraphs total. p>
  6. div>

In this case, the second div's paragraphs will not be targeted; only the first div. As soon as you apply more than one child to an element, the only-child pseudo class ceases to take effect.

View Demo

Compatibility

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

view plaincopy to clipboardprint?
  1. li:only-of-type {
  2. font-weight: bold;
  3. }

This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container. As an example, let's target all uls, which have only a single list item.

First, ask yourself how you would accomplish this task? You could do ul li, but, this would target all list items. The only solution is to use only-of-type.

view plaincopy to clipboardprint?
  1. ul > li:only-of-type {
  2. font-weight: bold;
  3. }
View Demo

Compatibility

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

The first-of-type pseudo class allows you to select the first siblings of its type.

A Test

To better understand this, let's have a test. Copy the following mark-up into your code editor:

view plaincopy to clipboardprint?
  1. <div>
  2. <p> My paragraph here. p>
  3. <ul>
  4. <li> List Item 1 li>
  5. <li> List Item 2 li>
  6. ul>
  8. <ul>
  9. <li> List Item 3 li>
  10. <li> List Item 4 li>
  11. ul>
  12. div>

Now, without reading further, try to figure out how to target only "List Item 2". When you've figured it out (or given up), read on.

Solution 1

There are a variety of ways to solve this test. We'll review a handful of them. Let's begin by using first-of-type.

view plaincopy to clipboardprint?
  1. ul:first-of-type > li:nth-child(2) {
  2. font-weight: bold;
  3. }

This snippet essentially says, "find the first unordered list on the page, then find only the immediate children, which are list items. Next, filter that down to only the second list item in that set.

Solution 2

Another option is to use the adjacent selector.

view plaincopy to clipboardprint?
  1. p + ul li:last-child {
  2. font-weight: bold;
  3. }

In this scenario, we find the ul that immediately proceeds the p tag, and then find the very last child of the element.

Solution 3

We can be as obnoxious or as playful as we want with these selectors.

view plaincopy to clipboardprint?
  1. ul:first-of-type li:nth-last-child(1) {
  2. font-weight: bold;
  3. }

This time, we grab the first ul on the page, and then find the very first list item, but starting from the bottom!:)

View Demo

Compatibility

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Conclusion

If you're compensating for older browsers, like Internet Explorer 6, you still need to be careful when using these newer selectors. But, please don't let that deter you from learning these. You'd be doing a huge disservice to yourself. Be sure to refer here for a browser-compatibility list. Alternatively, you can use Dean Edward's excellent IE9.js script to bring support for these selectors to older browsers.

Secondly, when working with JavaScript libraries, like the popular jQuery, always try to use these native CSS3 selectors over the library's custom methods/selectors, when possible. It'll make your code faster, as the selector engine can use the browser's native parsing, rather than its own.

Thanks for reading, and I hope you picked up a trick or two!

0 comments

Subscribe to: Posts (Atom)