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
– Niet the Dark Absol, Commented Jun 10, 2020 at 3: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. — Amazon Dies In Darkness
– Amazon Dies In Darkness, Commented Jun 10, 2020 at 9: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. — Amazon Dies In Darkness
– Amazon Dies In Darkness, Commented Jun 10, 2020 at 9:25

Alohci · Accepted Answer · 2020-06-10 07:58:51Z

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, 2020 at 7:58

answered Jun 10, 2020 at 7:20

Alohci

84.2k16 gold badges120 silver badges164 bronze badges

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

4 Comments

Amazon Dies In Darkness Over a year ago

That's a clever trick using line breaks inside comments. My thanks and upvote!

Amazon Dies In Darkness Over a year ago

Using your technique, besides possibly adding spaces before each */ is there any way to make the code more readable?

Temani Afif Over a year ago

@RockPaperLizard based on your HTML maybe you can have this; jsfiddle.net/erf10cqo if you want to target all the menu-* classes

Amazon Dies In Darkness Over a year ago

@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.

Collectives™ on Stack Overflow

Simplifying long CSS selectors

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related