html - CSS negation pseudo-class :not() for parent/ancestor elements -

this driving me nuts:

html:

<div><h1>hello world!</h1></div> 

css:

*:not(div) h1 { color: #900; } 

doesn't read, "select h1 elements have ancestor not div element...?" thus, "hello world!" should not coloured red, yet still is.

for above markup, adding child combinator works:

*:not(div) > h1 { color: #900; } 

but doesn't affect h1 element if not child of div element. example:

<div><article><h1>hello world!</h1></article></div> 

which why i'd indicate h1 element descendant, not child, of div element. anyone?

doesn't read, "select h1 elements have ancestor not div element...?"

it does. in typical html document, every h1 has @ least 2 ancestors not div elements — , ancestors none other body , html.

this problem trying filter ancestors using :not(): doesn't work reliably, when :not() not being qualified other selector such type selector or class selector, e.g. .foo:not(div). you'll have easier time applying styles h1 elements , overriding them div h1.

in selectors 4, :not() has been enhanced accept full complex selectors containing combinators, including descendant combinator. whether implemented in fast profile (and css) remains tested , confirmed, once implemented, will able use exclude elements ancestors. due how selectors work, negation has done on element , not ancestor in order work reliably, , therefore syntax little different:

h1:not(div h1) { color: #900; } 

anyone who's familiar jquery point out this selector works in jquery today. 1 of a number of disparities between selector 3's :not() , jquery's :not(), selectors 4 seeks rectify.