¿Es seguro utilizar un selector como * + *?

Question

Hace poco encontré este selector de CSS mientras trataba de encontrar una manera de espaciar fácilmente los principales elementos del blog, como párrafos e imágenes. Un ejemplo de su uso sería algo como esto:

.post *+* {margin-top: 15px;} 
/* or... */ 
.post > *+* {margin-top: 15px;} 
/* if you don't want the margin to apply to nested elements */ 

A primera vista, me pareció bastante útil. Entonces mi pregunta es: ¿Qué inconvenientes hay al usar estos selectores?

Específicamente:

1. ¿Cuál es el soporte de los navegadores como para esto?

2. ¿Hay algún caso en el que no desee un espaciado de margen entre los elementos de un artículo y si no es así, ¿es más fácil declararlo primero y luego sobrescribirlo o simplemente declarar cada elemento individualmente?

3. ¿Esto tiene problemas de rendimiento ya que está seleccionando todo dos veces?

Answer 1

1. ¿Cuál es el soporte de los navegadores como para esto?

   Básicamente, IE7 + y cualquier otro navegador moderno.

   Puede haber casos de esquina para cada navegador según los elementos que realmente se seleccionen o consulten con el combinador de hermanos +, pero no me preocuparía tanto como el hecho de que el margen se está aplicando a casi cualquier elemento que es un hermano sin motivo práctico.

2. ¿Hay casos que no le gustaría una separación aún margen entre los elementos en un artículo y si no es así, es más fácil para declarar esta primera y luego sobrescribir o simplemente declarar cada elemento de forma individual?

   Parece bastante útil a primera vista, pero si lo piensas bien, probablemente será una mejor idea ser más específico acerca de qué aplicar el margen. Esta es una regla que puedo suponer que será anulada muchas, muchas veces en el resto de la hoja de estilo por otros selectores específicos, lo que la hace bastante redundante e incluso no deseada en muchos casos. No puedo pensar en ningún uso del mundo real para una regla como tu ejemplo.

   Tenga en cuenta que, en este caso específico, vertical margins will collapse, por lo que solo necesita definir márgenes verticales para un conjunto de elementos sin tener que recurrir a aplicar margin-top exclusivamente a todos los hermanos siguientes de un elemento.

3. ¿Esto tiene problemas de rendimiento ya que está seleccionando todo dos veces?

   En realidad, no está seleccionando todo dos veces. El navegador solo mira cada elemento una vez, luego determina si cada elemento sigue a otro bajo el mismo elemento padre. No le importa qué tipo de elemento sigue, siempre y cuando siga a otro. No se trata de seleccionar cada elemento de nuevo y comparar para ver si son hermanos el uno del otro.

   Ahora, la gente dice que mediante el selector universal de * en conjunción con casi cualquier combinador provoca catástrofes prestación de rendimiento, por lo que la gente dice que este tipo de cosas se debe evitar a toda costa. Pero esto no tiene importancia (sinceramente, un selector como * + * es solo unos pocos microsegundos más lento que p + p), por lo que realmente no tiene que preocuparse por ello. Considere primero la utilidad de la regla de CSS, luego decida si realmente necesita la regla basada en eso.

---

Ahora, con todo lo que dijo (se está haciendo muy tarde aquí), probablemente habría reescrito el ejemplo como este, basado en lo que he dicho anteriormente en relación con los márgenes de colapso:

.post > * { margin: 15px 0; } 

Probablemente solo valga la pena reemplazar * con p si sabe que los únicos hijos que desea espaciar son los párrafos:

.post > p { margin: 15px 0; } 

O cualquier párrafo dentro de .post para el caso (p. dentro blockquotes):

.post p { margin: 15px 0; } 

(* siendo utilizado con el selector descendiente es juego limpio, lo admito, el combinador niño, por el contrario, se limita a un solo nivel de anidación, por lo que para cualquier persona obsesionarse sobre el rendimiento, esto no va a doler en absoluto.)

Answer 2

Se llama el "selector de hermanos".

De acuerdo con SitePoint, es compatible con todos los navegadores recientes y en IE8 +. IE7 tiene algunas limitaciones explicadas en la página de SitePoint, pero también funcionará en su mayoría.

Se define en el CSS2 spec.

Acerca del rendimiento: una gran cantidad de CSS está anulando a otros selectores. Eso es parte de la naturaleza en cascada de eso. Además, el rendimiento varía tanto entre los motores de render que no es práctico preocuparse por el rendimiento cuando se trata de CSS.

Answer 3

También debe considerar el error IE7 relacionado con ignorar el combinador de hermanos adyacentes (así como :first-child pseudoclass) si el comentario HTML está en lugar de donde IE7 espera ver un elemento. Hay un workaround que elimina los comentarios como nodos DOM después de que la página se carga en IE7.