Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can CSS pseudo-classes be used inside of the :not() pseudo-class?

I was wondering if its possible to "embed" pseudo-classes inside of each other. I have a hunch that you can't, but I just want to make sure I don't just have syntax wrong.

Here's an example of what I'm trying to do:

p.description { margin-bottom: 20px; }

Given that style, if you only want that to happen on matches that aren't the LAST p.description, is there anyway to do the following?

p.description:not(p.description:last-child)

Naturally, I'd have two styles, like so:

p.description { margin-bottom: 20px; }
p.description:last-child { margin-bottom: 0; }

...but that seems wasteful if it can be done in a single line.

Thanks a lot!

like image 342
Justin Edmund Avatar asked Oct 27 '25 19:10

Justin Edmund


2 Answers

Yes, to the title of your question:

p.description:not(:last-child)

No, to the CSS example in the body of your question

p.description:not(p.description:last-child)

The spec says:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

like image 82
Matt Ball Avatar answered Oct 30 '25 12:10

Matt Ball


Yes, p.description:not(:last-child).

like image 29
Ry- Avatar answered Oct 30 '25 10:10

Ry-