Simplifying long CSS selectors

Question

I have the following CSS selector:

#AllContextMenus :not(.menu-iconic-left):not(.menu-accel):not(.menu-accel-left):not(.menu-accel-container):not(.menu-accel-container-left):not(.menu-iconic-accel):not(.menu-right)::before

For readability purposes, I like to keep all code lines under 100 characters.

Is there any way to simplify, optimize, or write this CSS selector without changing what it matches and without reducing performance?

For example, is there any type of "and" operator that can be used within :not()?

Can you apply a style to `#AllContextMenus` and then override it for the specific menu types? — Niet the Dark Absol, Jun 10 '20 at 03:10
Context is irrelevant (I can post the thousands of lines of relevant code related to this selector, but no one will actually read it, and others will undoubtedly complain). I'm only asking about refining this selector without changing what it matches... nothing else. — RockPaperLz- Mask it or Casket, Jun 10 '20 at 09:15
@NiettheDarkAbsol Thanks for your suggestion. Your idea is basically what I've done. `#AllContextMenus` has a style, but specific sub-elements all need the same modifications to the style. — RockPaperLz- Mask it or Casket, Jun 10 '20 at 09:25

Alohci · Answer 1 · 2020-06-10T07:58:51.377

2

You generally can't simplify a selector without changing the semantics of what it matches.

But you can break a selector up into multiple lines at many points to meet maximum line length requirements. Just use a comment and put the line break inside the comment. Like this:

#AllContextMenus :not(.menu-iconic-left)/*
*/:not(.menu-accel)/*
*/:not(.menu-accel-left)/*
*/:not(.menu-accel-container)/*
*/:not(.menu-accel-container-left)/*
*/:not(.menu-iconic-accel)/*
*/:not(.menu-right)::before

#AllContextMenus :not(.menu-iconic-left)/*
*/:not(.menu-accel)/*
*/:not(.menu-accel-left)/*
*/:not(.menu-accel-container)/*
*/:not(.menu-accel-container-left)/*
*/:not(.menu-iconic-accel)/*
*/:not(.menu-right)::before {
  color:red;
  content:'TEST '
}

  <section id="AllContextMenus">
    <div class="a">A</div>
    <div class="menu-iconic-accel">menu-iconic-accel</div>
  </section>

edited Jun 10 '20 at 07:58

answered Jun 10 '20 at 07:20

Alohci

78,296
16
112
156

That's a clever trick using line breaks inside comments. My thanks and upvote! – RockPaperLz- Mask it or Casket Jun 10 '20 at 09:17
Using your technique, besides possibly adding spaces before each `*/` is there any way to make the code more readable? – RockPaperLz- Mask it or Casket Jun 10 '20 at 09:28
@RockPaperLizard based on your HTML maybe you can have this; https://jsfiddle.net/erf10cqo/ if you want to target all the `menu-*` classes – Temani Afif Jun 10 '20 at 09:55
@TemaniAfif Thank you for your suggestion. I like your idea. I need to go through many thousands of lines of code (most of which I didn't write) to see if something like that is a possibility. I'm going to spend a little time thinking of a good way to automate that process, because doing it manually would be very time-intensive. – RockPaperLz- Mask it or Casket Jun 10 '20 at 10:10

Simplifying long CSS selectors

1 Answers1