Myles Malloy Myles Malloy - 1 month ago 4x
CSS Question

Correct use of CSS :not selector for excluding certain instances of element

I am styling a series of pages of which I have no control of their markup, and it is presenting some unique challenges. The styles are based on a design mockup that I was given and therefore there are instances of- for example- h2 elements that must look different than other particular h2 elements in order for the design to be adhered to.

Currently, I am trying to apply some styling that should affect most h2 elements, but not h2 elements which appear within a div with the class "block". How would the CSS selector look in this case? I went out on a limb and tried this, but was correct in assuming it wasn't quite right.

h2:not(.block h2) {
~styling for main h2 elements~
.block h2 {
~separate styling for h2 elements within .block div~

Can someone shed some light? Thanks!


You can try this:

h2 {...}

.block h2 {...}