Pseudo-class di negazione CSS: not () per elementi padre / antenato

Questo mi sta facendo impazzire:

HTML:

Hello World!

CSS:

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

Non dice “Seleziona tutti gli elementi h1 che hanno un antenato che non è un elemento div …?” Quindi, “Hello World!” non dovrebbe essere colorato di rosso, eppure lo è ancora.

Per il markup di cui sopra, aggiungendo il combinatore di bambini funziona:

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

Ma non influenza l’elemento h1 se non è figlio di un elemento div . Per esempio:

 

Hello World!

Questo è il motivo per cui vorrei indicare l’elemento h1 come discendente, non figlio, dell’elemento div . Chiunque?

Non dice “Seleziona tutti gli elementi h1 che hanno un antenato che non è un elemento div …?”

Lo fa. Ma in un tipico documento HTML, ogni h1 ha almeno due antenati che non sono elementi div – e questi antenati non sono nient’altro che body e html .

Questo è il problema con il tentativo di filtrare gli antenati usando :not() : semplicemente non funziona in modo affidabile, specialmente quando :not() non è qualificato da qualche altro selettore come un selettore di tipo o un selettore di class, es .foo:not(div) . Avrai un tempo molto più semplice semplicemente applicando gli stili a tutti gli elementi h1 e sovrascrivendoli con div h1 .

In Selectors 4,: :not() è stato migliorato per accettare selettori completamente complessi contenenti combinatori, incluso il combinatore discendente. Se questo verrà implementato nel profilo veloce (e quindi in CSS), resta da testare e confermare, ma una volta implementato, sarete in grado di usarlo per escludere elementi con determinati antenati. A causa del funzionamento dei selettori, la negazione deve essere eseguita sull’elemento stesso e non sull’antenato per funzionare in modo affidabile, pertanto la syntax apparirà leggermente diversa:

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

Chiunque abbia familiarità con jQuery farà subito notare che questo selettore funziona in jQuery oggi . Questa è una delle numerose disparità tra Selector 3 :not() e jQuery’s :not() , che i Selettori 4 cercano di correggere.

L’elemento non è un

. L’elemento non è un

.

Quindi la condizione “ha un antenato che non è un

” sarà vera per tutti gli elementi.

A meno che tu non possa usare il selettore > (figlio), non penso che tu possa fare ciò che stai cercando di fare – non ha molto senso. Nel tuo secondo esempio,

non è un div, quindi corrisponde anche a *:not(div) .