Question

In the following situation, how can I use :not() to exclude div.note em from being bold?

div#content em {
    font-weight: bold;
}

/* I want to remove the following 
   in favor of the :not selector being applied to the above */
div#content div.note em {
    font-weight: normal;
}

PS: This is a stripped-down example, I actually have a number of styles in div#content em that I want to apply to everything except div.note em. That’s why I don’t want to overwrite them all manually lateron…

Answer 1

If you know the exact hierarchy between #content and .note, you can use child selectors to make the negation specific enough to work. If .note is a child of #content, you use:

#content > :not(.note) em, #content > em {}

If there are two <div>s between #content and .note, do something like:

#content > div > div > :not(.note) em, #content > em {}

You’re probably better off using what you have, though, and just overriding em elements that are descendants of .note.