CODEWITHSUNDEEP
csscss-selectorsless
harryStyle
harryStyle

Reputation: 23

LESS CSS selector combining not and :after pseudo element

I have 3 main elements: .submit-it, .send-it, .get-results.

I want all of their :after elements to have certain styling EXCEPT if they have the classes excluded, or error. I thought this would work, but it doesn't.

.submit-it, .send-it, .get-results {
  &:not(.excluded), &:not(.error) {
    &:after {
      content: 'text';
    }
  }
}

Upvotes: 2

Views: 2245

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241178

By generating the following selectors, you are essentially styling all :after pseudo elements regardless of their classes.

.submit-it:not(.excluded):after,
.submit-it:not(.error):after, { ... }

By selecting all elements without class excluded, and all elements without class error, you are indirectly selecting all the elements since these two events are not mutually exclusive.

Therefore you would chain the :not() pseudo classes, and replace:

&:not(.excluded), &:not(.error)

with:

&:not(.excluded):not(.error)

.submit-it, .send-it, .get-results {
  &:not(.excluded):not(.error) {
    &:after {
      content: 'text';
    }
  }
}

Which will output:

.submit-it:not(.excluded):not(.error):after,
.send-it:not(.excluded):not(.error):after,
.get-results:not(.excluded):not(.error):after {
  content: 'text';
}

Upvotes: 1

Related Questions