CODEWITHSUNDEEP
csscss-selectorsless
Phfelix
Phfelix

Reputation: 3

CSS3 nth-of-type and first-child before

I have a problem with nth-of-type(odd):before and first-child:before I need to disable :before content in first "li" element. Problem is that css don't react to first-child:before..

P.S I'm using LESS

So, there is a code:

li {
    &:first-child {
        &:before {
            content:none;
        }
    }

    &:nth-of-type(odd) {
        &:before {
            content:'\b7';
            margin:0 8px 0 5px;
        }
    }
}

Upvotes: 0

Views: 1797

Answers (1)

BoltClock
BoltClock

Reputation: 724342

li:first-child and li:nth-of-type(odd) will both match the same element, so in this case your second rule is completely overriding the first.

The simplest way around this is to move your first rule below, since both of your selectors are equally specific (1 element, 1 pseudo-class, 1 pseudo-element):

li {
    &:nth-of-type(odd) {
        &:before {
            content:'\b7';
            margin:0 8px 0 5px;
        }
    }

    &:first-child {
        &:before {
            content:none;
        }
    }
}

Note that because both selectors are matching the same element, the margin style will still apply to the first child's :before. But since you're using content:none in the second rule, you're effectively disabling the :before pseudo-element, so you shouldn't need to change anything else.

That said, if you want to cancel it out explicitly anyway, you can:

li {
    &:nth-of-type(odd) {
        &:before {
            content:'\b7';
            margin:0 8px 0 5px;
        }
    }

    &:first-child {
        &:before {
            content:none;
            margin:0;
        }
    }
}

Upvotes: 4

Related Questions