Using CSS pseudo and attribute selectors together

Question

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.

Answer 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.