Issues with :first-child and nth-child

**benlurr** · Feb 3, 2010 14:55

Hi there,

I'm trying to use the :first-child and nth-child selectors but I'm running into the same problem.

Can someone please explain to me why this works,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">


#lastyear .polaroid:first-child span{
	background:red;
}


</style>
</head>
<body>

<div id="container">
  <div id="lastyear">
    <div class="polaroid">
      <span>First model</span>
    </div>
  </div>
</div>
</body>
</html>

but this doesn't,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#lastyear .polaroid:first-child span{
	background:red;
}
</style>
</head>
<body>

<div id="container">
  <div id="lastyear">
    <span>foo</span>
    <div class="polaroid">
      <span>First model</span>
    </div>
  </div>
</div>
</body>
</html>

Note, the addition of the child span of #lastyear in the second example.

Any help would be much appreciated

**RyanReese** · Feb 3, 2010 15:26

Hi, it may be a bit confusing, but the selector you have there basically means this

Code:

#lastyear .polaroid:first-child span

It will select a span that is a parent of .polaroid class, and the .polaroid element HAS to be the first child of #lastyear

Since the span in the second example makes .polaroid the SECOND child of #lastyear the selector isn't used.

To test, putting that extra span in the 2nd example, AFTER the .polaroid div will make the selector work

. If you don't want to change the HTML of the 2nd example change the selector to last-child (since it's the last there(for now))

User Tag List

Thread: Issues with :first-child and nth-child

Thread Tools

Display

Issues with :first-child and nth-child

Bookmarks

Bookmarks

Posting Permissions