child and adjacent sibling

**geargolum** · Sep 17, 2007 08:19

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div > p > a:first-child { color: red; }
div > p > a:last-child { color: #ccc; }
div > p > a+a { color: yellow; }
</style>
</head>
<body>
<div>
  <p>some text <a href="#">link</a> and <a href="#">link2</a> and <a href="#">link 3</a></p>
</div>
</body>
</html>

Should the 3rd link be yellow or gray?

Firefox shows it gray and opera as yellow.

Who's right?

**DaveWoods** · Sep 17, 2007 08:38

It looks like a bug in Opera 9.2 and older which Opera 9.5 alpha should have resolved.

I believe that first-child and last-child have more specificity than the + selector and therefore the last link should display as gray irrelevant of the order.

**zcorpan** · Sep 17, 2007 11:39

Opera 9.2 doesn't support :last-child, so the second ruleset isn't applied at all.

It should be gray; as csswiz says it has higher specificity (although the + combinator doesn't affect specificity).

Code:

         Selector           Specificity
div > p > a:first-child     0,0,1,3
div > p > a:last-child      0,0,1,3
div > p > a+a               0,0,0,4

User Tag List

Thread: child and adjacent sibling

Thread Tools

Display

child and adjacent sibling

Bookmarks

Bookmarks

Posting Permissions