Socialgo has done a good job in their HTML structure design. They have kept it very clean but also allowed us to grab, or hook as I say, to many of the elements on a page. But what if you want to hook something that has no unique tag to hook to? There are several places you will find this problem and the one you will probably find first is the Magazine Sidebar. For instance, If you want to create a drop down style menu for your categories like this site has (to the right), you will have to do it to all the elements  in that sidebar, not just the categories. Child elments to the rescue.. well sort of.

 

Such an odd child he was

You may know of Nth-child(2) and first-child CSS attributes, but if you've tried to use them,

you've found they are about as useful as hair on your hips.

you've found they are about as useful as hair on your hips; that is because they are not supported by most browsers out there. What these attributes allow you to do is select children of a parent. Let's say you have a div with 20 H1 tags in it. With nth-child you could grab say the 6th H1 and make it different than the rest. Or with nth-child(odd)you could grab every other h1 and make it pink. This is very cool, and absolutely a powerhouse when dealing with template HTML you have no control over.

 

Java Script nth

sometimes I just have to kiss the screen when I'm surffing "a list apart." In fact if you go over there, you might not ever come back to my site, well maybe because of my good looks. They have offered up to the public a ingenious little Java Script (offspring), and I mean little, that allows us to use the Child elements in CSS for most browsers that matter. What this Java script does is attach the class of "odd", "even", "nth" and so one to every tag on your page. Plus, it's quick. I did a speed test and could hardly see the difference, maybe a second and a half. I won't go into this further, I'll let A LIST APART pick it up from here. But, Please note, that the syntax is different for this JS trick than for the proper CSS. For one thing you don't use the ":" between the main attribute and "nth" property. You also use a dash "-" and then the "#" number, instead of the "()" with the nth properties. Take a look, and please come back, I'll try to be relevant!! :)