CODEWITHSUNDEEP
cssoptimizationreadabilitysimplificationcode-structure
Amazon Dies In Darkness
Amazon Dies In Darkness

Reputation: 5833

Simplifying long CSS selectors

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()?

Upvotes: 0

Views: 559

Answers (1)

Alohci
Alohci

Reputation: 83126

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>

Upvotes: 2

Related Questions