Table Row and Column Highlighting

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn’t nearly as efficient as it could be, so this is an update to that. Shout…
(Updated on )

Child and Sibling Selectors

Do you know what the difference between these selectors are?

ul li { margin: 0 0 5px 0; }
ul li { margin: 0 0 5px 0; }

I’ll admit it took me longer than it probably should have (way …

(Updated on )

Meet the Pseudo Class Selectors

Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover {
  /* Yep, hover is a pseudo class */
}

They are immensely useful in a …

(Updated on )

Multiple Class / ID and Class Selectors

Can you spot the difference between these two selectors?

#header.callout {  }

#header .callout { }

They look nearly identical, but the top one has no space between #header and .callout while the bottom one does. This small difference makes …

(Updated on )

The Skinny on CSS Attribute Selectors

CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. Check out this bit of HTML:

<h2 id="title" class="magic" rel="friend"David Walsh</h2

This single element has three …

(Updated on )

How nth-child Works

There is a CSS selector, really a pseudo-selector, called :nth-child. Here is an example of using it:

ul li:nth-child(3n+3) {  
  color: #ccc;
}

What the above CSS does, is select every third list item inside unordered lists. That is, …

(Updated on )