I have color borders around first section, "Languages & Software" and a color border around the paragr inside it...(in real situation hide and show sections dynamically under those three headers, that's why headers are links, but made them all visible here since this is just for testing...)

first-child only targets an element if it is the first child in a parent element. As in there's no previous siblings before it.The only thing you can target out of these elements with first-child is the very first link at the top.

The first-child within <body class="skills"> is <a name="top>. It is the topmost element within <body class="skills">. first-child = topmost inner element.

<div class="wrapper"> may be the first of a series of <div class="wrapper">s, but it is not the first-child. It is not the topmost inner element. To target the first <div class="wrapper"> you can use one of the other aforementioned methods (none of which were "first-child").

Ralph's recommendation of the adjacent sibling selector is probably the best since it is IE8 friendly.

nth-child(1) will not work for the same reason that first-child will not work.

nth-child(5) should work because the first <div class="wrapper> is the fifth child in <body class="skills">

yes I know I can add a class.. I just thought that with CSS3 we wouldn't need to add so many classes anymore, because we now have these first/last-child & nth-child selectors (esp for mobile, where browser support is not an issue..) still don't get why this doesn't work...

so what's the point of those selectors then, if they don't always work.. (they work for me only sometimes... for ex something like

yes I know I can add a class.. I just thought that with CSS3 we wouldn't need to add so many classes anymore, because we now have these first/last-child & nth-child selectors (esp for mobile, where browser support is not an issue..) still don't get why this doesn't work...

so what's the point of those selectors then, if they don't always work.. (they work for me only sometimes... for ex something like div p:last-child

will work, but not example I posted here.. I just don't get this...

ok...

thank you...

Perhaps third time lucky first-child and last-child work every time for the specific case they target.

They target the first and last elements within a parent ( the first and last li elements above )