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
div p:last-child
will work, but not example I posted here… I just don’t get this…
Because this isn’t Stack Overflow. Replies are ordered according to when they were posted.
ronpat gave you a very clear explanation of where you are going wrong, with an example of how nth child needs to be used for your example. Make sure to read all replies since your last one.