3

I'm applying :last-of-type to an element that should be as such. Check out the final div.info (that's the bottom information for each article) on http://www.elemovements.com. Why is it not working?

Gabriel Ryan Nahmias
  • 2,135
  • 2
  • 26
  • 39
  • 11
    please give code as opposed to saying "go to this site and figure it out" –  Apr 20 '12 at 21:05
  • Out of curiosity, why is there a `div` element in the `head` of that page..? – David Thomas Apr 20 '12 at 21:08
  • 3
    Please post the code relevant to the question. Ideally, **in addition** to the code in the question body itself, please add a [jsFiddle](http://jsfiddle.net/api/post/jquery/1.7.1/) example of your problem. It will help us help you. – Madara's Ghost Apr 20 '12 at 21:11
  • @David: There's a `div` because defining images with CSS to me is much better than an `img` tag. What's the issue? – Gabriel Ryan Nahmias Apr 21 '12 at 10:13
  • I think he's referring to placing display content in the page head rather than the body, but I'm on mobile and can't see the source for myself :) – BoltClock Apr 21 '12 at 11:23
  • That `div` it is is not my natural doing. It's AddThis injecting code into my page. Case settled. – Gabriel Ryan Nahmias May 09 '12 at 03:04

3 Answers3

14

The :nth-of-type() family of pseudo-classes only look at an element's type, that is, its tag name. They do not filter by your class selector or any other selector.

Therefore, your statements:

I'm applying :last-of-type to an element that is clearly as such. Check out the final div.info

Are contradictory. There's a div.center after that, making that the last div, not your div.info.

You cannot currently use CSS selectors to find your last div.info; you'll have to resort to adding an extra class and/or using JavaScript.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
2

You're having one of the most common misconceptions about CSS. CSS is not read left-to-right, but right to left!

Meaning, the browser will look for div.info:last-of-type, so browser will filter elements in the following order:

  1. Last element of each type (tag name)
  2. Has class of info
  3. Is a div.

Your element does not satisfy these conditions in that order. It may be the last div with class of info, but no last element has a class of info

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • I don't believe the right-to-left ordering applies this way (nor will CSS4 selectors mess it up, @Zeta) - see [this](http://stackoverflow.com/a/10108700/106224) and [this](http://stackoverflow.com/a/5813672/106224), particularly the last paragraph, where it makes it clear that some simple selectors are treated specially, and not everything goes strictly from right to left. – BoltClock Apr 20 '12 at 21:15
  • @BoltClock'saUnicorn: Noted. I guess it's finally time to log off for today before I tell anyone that it's good practice to use `$($);`… – Zeta Apr 20 '12 at 21:25
  • @BoltClock'saUnicorn: That's exactly how it goes. The answers you gave me only approve my answer. Pseudo elements are read first, which narrows down the list of elements to scan significantly. It's done for performance. – Madara's Ghost Apr 21 '12 at 06:10
0

This 2 are the same:

div.info:last-of-type

div:last-of-type.info

The :last-of-type is hitting the div, not the .info, and the .info is limiting the found results to 0.

Another example:

.section.section-test:last-of-type

Would actually works like: .section:last-of-type.section-test

Xwhdkqxfpy Xwhdkqxfpy
  • 1
  • 1