[CSS] Selectors

[chrisdavidmills]

Acceptance criteria

1. • [x] The listed features are documented sufficiently on MDN
2. • [x] BCD is updated
3. • [x] Interactive example and data repos are updated if appropriate
4. • [ ] The content has been reviewed as needed

Features to document

1. Support for compound selectors and complex selectors within :not() negation pseudo-class. Needs BCD update, and some examples adding to the :not() page

Related Gecko bugs

1. • [x] support compound selectors and complex selectors within :not() negation pseudo-class.

For folks helping with Firefox-related documentation features — make sure above AC have been done, but also:

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
• Add entry to Firefox experimental features page if feature is not yet enabled in release

[rachelandrew]

Added an example of complex syntax to the example section. I also updated the previous example with a clearer result and to remove a class named ".crazy" as it is exclusive language (regarding MH issues, and seemed unnecessary).

https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:not

Added to release notes.

[chrisdavidmills]

Great work, thanks @rachelandrew . I've reviewed this, made a few small edits, and it looks fine.

I also see you did the BCD too: https://github.com/mdn/browser-compat-data/pull/7376

When that gets merged, I think we can close this.

[mikoMK]

I had a look at the examples and it seems that the existing example

body :not(p) {
  text-decoration: underline;
}

has no effect due to the newly used text-decoration: overline. I don't think that's intentional. How about using this:

body :not(p) {
  font-style: italic;
}

[chrisdavidmills]

I had a look at the examples and it seems that the existing example

body :not(p) {
  text-decoration: underline;
}

has no effect due to the newly used text-decoration: overline. I don't think that's intentional. How about using this:

body :not(p) {
  font-style: italic;
}

I had a look at this, and it seems to work for me (I tried in both Fx and Chrome) — the third and fourth elements in the example are underlined because they are not paragraphs?

[mikoMK]

It works in Fx 83 and Chrome, because they don't support complex selectors in ":not()" and therefore ignore the fifth rule. When testing in Fx Beta or Nightly (which support complex selectors in ":not()") the text-decoration: overline of the fifth rule takes precedence. Am I missing something?

[chrisdavidmills]

@mikoMK my apologies — I didn't have my Firefox Nightly updated. Now I can see exactly what you mean ;-)

I've updated the wording and the styling so that it makes a bit more sense.

[mikoMK]

There's no need to apologize. I'm glad I could help to improve the example. Thanks to you and the other tech writers at MDN. You're doing an amazing job in providing the world with knowledge!

[chrisdavidmills]

Thanks to you and the other tech writers at MDN. You're doing an amazing job in providing the world with knowledge!

;-)

[chrisdavidmills]

All done, looks like we can close this one.