Selector universal * y pseudo elementos

¿El selector universal * afecta a pseudo elementos como :before y :after ?

Dejame usar un ejemplo:

Al hacer esto:

 * { box-sizing: border-box; } 

… ¿la statement anterior no incluye / afecta automáticamente a los pseudo elementos como :before y :after también?

O bien, para afectar a los pseudo elementos como :before y :after , ¿hay que declarar esto?

 *, *:before, *:after { box-sizing: border-box; } 

¿Esto tiene sentido?


Siempre he usado just * { box-sizing: border-box; } * { box-sizing: border-box; } y nunca ha tenido ningún problema con pseudoelementos en absoluto. Pero veo muchos tutoriales haciendo *, *:before, *:after pero nunca explican por qué incluyen *:before, *:after en la statement.

No, el selector universal * no afecta a los pseudo-elementos (excepto indirectamente a través de la herencia , ya que los pseudo-elementos generalmente se generan como hijos de elementos reales).

El selector universal, al igual que otros selectores de elementos nombrados, como p y div , es un selector simple :

Un selector simple es un selector de tipo, selector universal, selector de atributos, selector de clases, selector de ID o pseudoclase.

Un selector simple y, por extensión, cualquier selector complejo, se dirige solo a elementos reales.

Aunque los pseudoelementos (que no son lo mismo que las pseudoclases mencionadas anteriormente) pueden aparecer en notación de selector junto con selectores simples, los pseudoelementos están completamente separados de los simples, ya que representan abstracciones del DOM que están separadas de los elementos reales . y por lo tanto, ambos representan cosas diferentes. No puede hacer coincidir un pseudo-elemento con un selector simple, ni puede aplicar estilos a un elemento real en una regla CSS con un pseudo-elemento en su selector.

Entonces, para hacer coincidir :before y :after pseudo-elementos de cualquier elemento, sí, uno deberá incluir *:before, *:after en el selector. Tener solo * { box-sizing: border-box; } * { box-sizing: border-box; } no los afectará dado box-sizing normalmente no se hereda, y como resultado, retendrán el box-sizing: content-box predeterminado: box-sizing: content-box .

Una posible razón por la que es posible que nunca haya tenido problemas con los pseudoelementos es que se muestran en línea de forma predeterminada, ya box-sizing no tiene ningún efecto en los elementos en línea.

Algunas notas:

  • Al igual que con cualquier otra cadena de selectores simples, si * no es el único componente, puede omitirlo, lo que significa que *, :before, :after es equivalente a *, *:before, *:after . Dicho esto, el * generalmente se incluye por motivos de claridad: la mayoría de los autores están acostumbrados a dejar el * fuera al escribir identificador y selectores de clase, pero no pseudoclases y pseudoelementos, por lo que la notación puede parecer extraña e incluso incorrecta para ellos (cuando de hecho es perfectamente válido).

  • La especificación actual de Selectores a la que vinculo anteriormente representa pseudo-elementos con dos puntos dobles. Esta es una notación nueva introducida en la especificación actual para distinguir pseudoelementos de pseudoclases, pero la mayoría box-sizing restablecimientos de box-sizing usan la notación de dos puntos para acomodar IE8, que admite box-sizing pero no la notación de dos puntos.

  • Aunque *:before, *:after aplica estilos a los pseudoelementos respectivos de cualquier elemento, que incluye html , head y body , los pseudoelementos no se generarán hasta que aplique la propiedad de content . No tiene que preocuparse por ningún problema de rendimiento ya que no hay ninguno. Para una explicación detallada, vea mi respuesta a esta pregunta relacionada .

Solo puedo citar de la especificación :

El selector universal, escrito “*”, coincide con el nombre de cualquier tipo de elemento. Coincide con cualquier elemento individual en el árbol de documentos.

Los tipos de elementos son, por ejemplo, span y div .

Como los pseudo elementos no tienen un “tipo de elemento” y no son parte del árbol de documentos, parece que la respuesta es no , no incluye pseudo elementos.

Sin embargo, dado que los pseudo-elementos heredan las propiedades de CSS de su “padre” (al menos las que son heredables) y el selector universal también afecta al padre, afecta indirectamente a los pseudo-elementos.

Ejemplo

  • el color es heredado
  • el estilo de borde no es y el elemento ::before no tiene un borde