css3 prob -- first:child selector

HTML & CSS
1

http://mayacove.com/mobile/test_mobile.html

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…)

body.skills .wrapper:first-child { border:solid 1px green; }
body.skills .wrapper:first-child section {border:solid 1px red; }

(lines 98 & 99 in stylesheet… http://mayacove.com/mobile/style.css)

but for some very odd reason these are being ignored… don’t get why… I have first:child selector elsewhere in this stylesheet w/no probs…

I even validated this little bit of css, it validates… would appreciate suggestions…

thank you…

2

Instead of wrapper:first-child
try wrapper:first-of-type
and see if that works for you.

3

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.


<body class="skills">
  <a name="top"></a>
  <header></header>
  <ul id="nav_top" class="nav"></ul>
  <ul id="nav_main" class="nav"></ul>
  <div class="wrapper"></div>
  <div class="wrapper"></div>
  <div class="wrapper"></div>
  <div id="wrapper_top_link"></div>
</body>
4

You could even use something like


[COLOR="#FF0000"].nav + .wrapper[/COLOR] {
  border:solid 1px green;
}

That would target just the first .wrapper div.

5

I don’t get this… I can’t target this first <div class=“wrapper”> inside the body tag with :first-child selector???

(this is in reply to markbrown4 (why don’t replies appear beneath post you’re replying to?? :wink:

PS: nth-child(x) is also not working… I just don’t get this… :frowning:

body .wrapper:nth-child(1) section {border:solid 1px red; } –> not working…

my gosh and I thought this was supposed to be such a big deal with CSS3… (???)

6

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”>

7

“Reply With Quote” is the best way to tie a response to something specific.

Before first-child and last-child a lot of people were adding classes to those items, as you often want to style them differently.


<ul>
  <li class="first">first</li>
  <li>another</li>
  <li>another</li>
  <li>another</li>
  <li class="last">last</li>
</ul>

If you need to style your first container differently just add a class.

8

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…

9

Perhaps third time lucky :slight_smile:
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 )


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
li:first-child { background: red }
li:last-child { background: blue }
</style>
</head>
<body>
<ul>
  <li>first</li>
  <li>another</li>
  <li>another</li>
  <li>another</li>
  <li>last</li>
</ul>
</body>
</html>
10

Because this isn’t Stack Overflow. :smiley: 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. :slight_smile: