¿Se supone que el selector CSS: not () funciona con descendientes lejanos?

Aquí está la documentación oficial de la pseudo clase CSS3 :not() :
http://www.w3.org/TR/css3-selectors/#negation
y la mejora propuesta de CSS Selectors Level 4:
http://dev.w3.org/csswg/selectors4/#negation

He estado buscando la implementación y el soporte del navegador para :not() , pero los únicos ejemplos que encontré fueron con un solo elemento o con un elemento directo de un elemento, por ejemplo:

 div *:not(p) { color: red; } 

El ejemplo anterior funciona cuando

es un elemento secundario directo de

, pero no funciona cuando

es un descendiente más distante de

.

 div :not(p) { color: red; } 
 
  • This is red

This is NOT

This is red but is not supposed to be!

Si la respuesta está en la documentación oficial anterior, entonces no la he entendido. Como dije, he buscado este sitio y la web, pero no he podido encontrar ninguna discusión sobre el soporte o la falta de: no () como nietos de otro elemento.

¿Se supone que esto funciona como creo que debería?

¿Se supone que esto funciona como creo que debería?

No, el comportamiento que estás viendo es correcto.

En su último ejemplo, aunque

contiene un

, es el

mismo el que coincide *:not(p) , así como la condición de que debe ser un descendiente del

, que es. El estilo se aplica solo a

, pero luego lo hereda el

dentro de él.

El elemento

sí mismo cuenta contra la negación, por lo que

aún se excluye de su selector. Simplemente hereda el color del texto de su elemento primario, el elemento

.

Incluso si ninguno de sus ancestros relativamente cercanos coincide con el selector, también tiene elementos como html y body que preocuparse, aunque es probable que pueda usar un selector de body desde el principio:

 body div... 

Esta es la razón por la que a menudo desaconsejo usar el selector :not() para filtrar descendientes, especialmente cuando no está calificado con un selector de tipo (como div en su ejemplo). No funciona de la manera que la mayoría de la gente espera, y el uso de propiedades heredadas como el color solo sirve para agravar el problema, además de hacerlo aún más confuso para los autores. Vea mis respuestas a estas otras preguntas para más ejemplos:

  • ¿Por qué esta statement CSS: not () no se filtra?
  • Pseudo-clase de negación CSS: not () para elementos padres / ancestros

La solución al problema descrito es simplemente aplicar un color diferente a los elementos

. No podrá simplemente excluirlos con un selector debido a la herencia:

 /* Apply to div and let all its descendants inherit */ div { color: red; } /* Remove it from div p */ div p { color: black; } 

En Selectores Nivel 4: sí,: :not() se ha mejorado para aceptar selectores complejos completos que contienen combinadores. Esencialmente, esto significa que (una vez que los navegadores comiencen a implementarlo) podrá escribir el siguiente selector y hacer que haga exactamente lo que desea:

 p:not(div p) { color: red; } 

En caso de que alguien esté interesado, esto funciona en jQuery hoy.

El color se asigna a la blockquote , y luego es heredado por la p .

:not(p) simplemente lo hace para que los estilos no se apliquen directamente . Sin embargo, todavía son hereditarios.