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

Question

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!

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 19, 2011 at 17:12

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BoltClock Over a year ago

Hm, apparently the definition was changed between CSS2 and CSS3. In CSS2, p.description:first-child would be considered a simple selector.

Matt Ball Over a year ago

Aside from whether or not it's "reasonable" for :not() to take simple selectors only, I think the CSS3 definition of "simple selector" is reasonable, and makes more sense than the CSS2 definition.

Justin Edmund Over a year ago

This is what I was looking for. I had a hunch it was possible but I wasn't sure what the correct syntax was. Thanks!

Ry- · Accepted Answer · 2011-04-19 17:12:35Z

2

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

answered Apr 19, 2011 at 17:12

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

2 Comments

BoltClock Over a year ago

... because :not() can take a simple selector, which the pseudo-class :last-child is.

Ry- Over a year ago

Sorry, I had already edited the post when you said this. (I wrote a JavaScript library that allows complex selectors in :not() so I got a bit confused :P)

cmplieger · Accepted Answer · 2011-04-19 17:14:18Z

0

Yes you can, in webkit it works fine. I use this for example:

.middlenav:not(:nth-last-child(1))

Works great.

so p.description:not(:last-child). should too

answered Apr 19, 2011 at 17:14

cmplieger

7,41117 gold badges57 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related