0

Because of a bug in webkit browsers, you can't use attribute and :before/:after classes by default.

The fix doesn't seem to have any effect when using nth-last-of-type selector.

Here's what I'm doing:

    .left[class^='col']:nth-last-of-type{
        margin-right: 0 !important;
    }

Just wanted to check and see if I'm not overlooking something simple.

  • You're not using any child selectors. Also, what do you mean by "There's a fix for using pseudo and attribute selectors together"? – BoltClock May 25 '14 at 05:39
  • @BoltClock What is the nth-last-of-type called then? And I meant that there is a bug in webkit browsers. I'll edit to clarify. –  May 25 '14 at 05:40
  • It's called a pseudo-class. – BoltClock May 25 '14 at 05:40
  • :before and :after are pseudo-elements, whereas :nth-last-of-type is a pseudo-class - WebKit only has issues with specific pseudo-elements AFAIK. – BoltClock May 25 '14 at 05:47
  • @BoltClock I guess I was just trying to be more specific. I didn't want to say that I was talking about :before or :after. Also, while researching this I ran into your jsfiddle. http://jsfiddle.net/BoltClock/jmAX6/8/ –  May 25 '14 at 05:47
  • I think I see the issue now so I'll post an answer. Is `:nth-last-of-type` exactly as it is in your code? If so, that's a syntax error, which I'll address in my answer. – BoltClock May 25 '14 at 05:50
  • Yeah. That's how it is. Also, I suppose I should have been more clear about that both the .left and the class beginning with "col" are applied to the same element. –  May 25 '14 at 05:56

1 Answers1

1

Your :nth-last-of-type syntax is a bit off — it's either :last-of-type or functional :nth-last-of-type() with a formula an+b as an argument.

The pseudo-classes pertaining to "type" refer to the element type, represented by its tag name. It does not mean "the last element matching the rest of this selector".

If, for example, the last element matching .left[class^='col'] is not the last span element, then :last-of-type will not match. You'll have to modify your HTML to either segregate those span elements from others, or add a class to the last such element, before you can target it with a selector.

WebKit does not have any issues with pseudo-classes and attribute selectors that I'm aware of (or if it did, those issues have long been fixed). It does have issues with pseudo-elements, which I address here, where the fiddle link originates.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks for the info. It definitely helped lead me to getting my problem solved. The code that ended up doing what I wanted was: `.left[class*='col']:last-child{` Part of the problem was changing ^ to *, because of the left class before the "col" class. –  May 25 '14 at 06:51