How to exclude a particular class in css?

Question

Here's my css:

.single-post .container {
    width: 60%;
}

not(.single-post) .container{
            min-width:92%;
    }

What I am trying to achieve is: I want the container width to be 60% on single post pages and 92% on every other page. So, I am trying to exclude .single-post class from 2nd line of code by using not(.single-post) but it's not working.

However, First line of code is working fine.

Is the `.single-post` class on the `.container` element, or on a parent element? — Sean, Jul 09 '20 at 20:24

score 2 · Answer 1 · answered Jul 09 '20 at 20:26

You can declare the general case first and the more specific later. The order of declarations matters (cascading). Run the following sample to check it out.

.container{
    width:92%;
    background-color: blue;
}

.single-post .container {
    width: 60%;
    background-color: red;
}

<!-- normal page -->
<div>
  <div class="container">
    &nbsp;
  </div>
</div>

<p>&nbsp;</p>

<!-- single post post page -->
<div class="single-post">
  <div class="container">
    &nbsp;
  </div>
</div>

Ah you beat me to it. Upvoting. – Sean Jul 09 '20 at 20:28 — Sean, Jul 09 '20 at 20:28

score 1 · Answer 2 · answered Jul 09 '20 at 19:59

1

:not(.single-post) .container{
        min-width:92%;
}

: should be added.

Secondly, you may need to add !important after 92%

so final code will be

:not(.single-post) .container{
        min-width:92% !important;
}

answered Jul 09 '20 at 19:59

Naveed Ramzan

3,565
3
25
30

now single post pages also have 92% width in the container. So, it did not exclude .single-post class. – Jul 09 '20 at 20:07
Can you share live url so i can see ? – Naveed Ramzan Jul 09 '20 at 21:13

score 0 · Answer 3 · answered Jul 09 '20 at 20:14

As far as I know you can't use :not() on nested classes: nesting inside css :not() selectors

You could try using !important on single posts?

.container {
  background-color: lightblue;
  margin: 1em 0;
  padding: 1em;
  width: 92%;
}

.single-post .container {
  width: 60% !important;
}

Working fiddle: https://jsfiddle.net/rmgawnu8/1/

Note that you'll have to use the same CSS reference.

score 0 · Answer 4 · answered Jul 09 '20 at 20:28

Assuming that the .single-post class is on the body element or another parent element, you could just write the following:

.container {
  width: 92%;
}
.single-post .container {
  width: 60%;
}

This will set the width of the .container element to 92% on all pages—except when it's on the .single-post page, where it will be set to 60% because that ruleset is defined later in the cascade and is more specific than the previous ruleset.

How to exclude a particular class in css?

4 Answers4