Paradox Paradox - 19 days ago 8
CSS Question

CSS how to select nav and li tags but exclude specified class?

I have the following CSS block:

nav li {
border-bottom: 1px solid Gray;
}


How could I make it so that it applies to
nav
and
li
but not the class called
export
? As it currently is, the styling is being applied to the
export
class because it is in a
nav
and an
li
tag.

Here is the corresponding HTML:

</head>
<body>
<nav class="main menu">
<ul class = button-container>
<li>
<i class="..." style="font-size:6em;" title="..."></i>
</li>
<li>
<i class="..." style="font-size:6em;" title="..."></i>
</li>
</ul>

<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;" title="Export"></i>
</li>
</ul>
</nav>

Answer

You can do nav li:not( .export ) {}.

More on :not pseudo class.

nav li:not( .export ) {
  color: red;
}
<nav>
  <ul>
    <li>One</li>
    <li class="export">Two</li>
    <li>Three</li>
  </ul>
<nav>

Edit

- Example using markup OP added to question.

Notice I simplified the CSS selector using the lowest amount of specificity to change the li. Unless .export appears on other elements or you have some other rule specifically targeting the li, you won't need the extra specificity that nav ul:not( .export ) li would provide.

ul:not( .export ) {
  color: red;
}
<nav>
  <ul class="other">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <ul class="export">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>

Comments