如何在 css 中排除特定的 class？

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.

Answer 1

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>

Answer 2

: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;
}

Answer 3

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.

Answer 4

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.