user4777975 user4777975 - 4 months ago 7
CSS Question

:not() doesn't work as expected

div.entry-content:not(body.single div.entry-content)
{
font-family: 'Droid Sans', sans-serif;
margin-top:10px;
line-height: 114%;
font-size:15px;
}


the above css doesn't effect any elements at all ....I want
div.entry-content
elements that exist inside a
body
with the class
single
to be styled differently from the rest
div.entry-content
elements ..

body.single div.entry-content
{}


and

div.entry-content
{}


do seem to work just fine .. but

div.entry-content:not(body.single div.entry-content)
{}


doesn't seem to

Answer

You need to rewrite the selector line to work the way you intend it to:

body:not(.single) div.entry-content {
  font-family: 'Droid Sans', sans-serif;
  margin-top:10px;
  line-height: 114%;
  font-size:15px;
}

This CSS Tricks page elaborates on the fact that you may only use a simple selector within a :not pseudo-class, which they define as follows in the footnote:

A simple selector is classified as a Type Selector, Universal Selector, Attribute Selector, Class Selector, ID Selector, or Pseudo Class Selector.

Comments