jquery - seleccionar - Ordenar selectores simples en una secuencia

selectores en jquery (4)

5.2 Sintaxis del selector
Un selector simple es un selector de tipo o selector universal seguido inmediatamente por cero o más selectores de atributo, selectores de ID o pseudo-clases, en cualquier orden . El selector simple coincide si todos sus componentes coinciden.
Nota: la terminología utilizada aquí en CSS 2.1 es diferente de lo que se usa en CSS3. Por ejemplo, un "selector simple" se refiere a una parte más pequeña de un selector en CSS3 que en CSS 2.1. Vea el módulo selectores de CSS3 [CSS3SEL].
Un selector es una cadena de uno o más selectores simples separados por combinadores. Combinators son: espacio en blanco, ">" y "+". Puede aparecer un espacio en blanco entre un combinador y los selectores simples que lo rodean.
Los elementos del árbol de documentos que coinciden con un selector se denominan sujetos del selector. Un selector que consta de un único selector simple coincide con cualquier elemento que satisfaga sus requisitos. El anteponer un selector simple y un combinador a una cadena impone restricciones de coincidencia adicionales, por lo que los sujetos de un selector son siempre un subconjunto de los elementos que coinciden con el último selector simple.
Se puede agregar un pseudo-elemento al último selector simple de una cadena, en cuyo caso la información de estilo se aplica a una subparte de cada tema.

De: w3.org

Esto es meramente una pregunta conceptual acerca de las buenas prácticas.

La pregunta es simple. ¿Hay alguna forma "adecuada" para ordenar las partes de un selector jQuery / CSS? Por ejemplo, supongamos que tengo un elemento que tiene los siguientes atributos:

<div class="red green blue" id="someDiv" anAttr="something">

Para una buena medida, también apuntémoslo cuando está siendo suspendido.

¿Hay alguna diferencia entre los siguientes selectores ?:

div.red.green.blue#someDiv[anAttr=''something'']:hover div#someDiv.red.green.blue[anAttr=''something'']:hover div.red#someDiv[anAttr=''something'']:hover.blue.green div[anAttr=''something''].blue:hover#someDiv.red.green

Es decir, ¿realmente importa el orden de los objetivos? ¿O puedo simplemente ponerlos en cualquier orden que quiera?

Según este JSFiddle , todos técnicamente funcionan.

El orden en que los colocas no importa. Lo que importa es el contenido de tus clases de CSS.

Querrá asegurarse de que una de las clases CSS no establezca una propiedad que supere el estilo de otra clase CSS.

En el siguiente ejemplo, la clase verde anulará la clase roja, lo que hará que el color del texto del div se vuelva verde.

Ejemplo de CSS:

.red{ /* set text color to red */ color:red; } .green{ /* set text color to red */ color:green; }

El orden puede hacer una diferencia en la velocidad de los selectores jQuery. Hice una prueba de jsPerf , y resulta que usar el ID es el más rápido (no sorprendentemente), y tener el selector de atributos primero es más lento, un poco. Los otros son bastante similares.

Tenga en cuenta que tuve que quitar el :hover selector de desplazamiento para jQuery, ya que eso es puramente una cosa de CSS AFAIK.

Tenga en cuenta que, como dice la cita en la respuesta de Emmanuel, CSS2.1 tiene ligeras diferencias de terminología con respecto al nivel 3 actual , por lo que consideraría obsoletas las definiciones de CSS2.1. La sintaxis sigue siendo prácticamente la misma, pero la terminología es más definida: un selector simple ahora siempre se refiere a cualquier componente en cada uno de lo que ahora se conoce como secuencias de selector simple, o mejor aún, selectores compuestos .

Aquí está la misma cita del estándar de nivel 3, con solo los bits relevantes:

4. Sintaxis del selector
Una secuencia de selectores simples es una cadena de selectores simples que no están separados por un combinador. Siempre comienza con un selector de tipo o un selector universal. No se permite ningún otro selector de tipo o selector universal en la secuencia.
Un selector simple es un selector de tipo, selector universal, selector de atributos, selector de clases, selector de ID o pseudoclase.

A diferencia de CSS2.1, esta especificación no usa la frase "en cualquier orden" explícitamente, pero se implica fácilmente por el hecho de que solo establece la excepción para los selectores de tipo / universales. Hasta donde yo sé, la única razón para esta excepción es que un selector de tipo no tiene ningún símbolo especial, lo que hace que sea imposible distinguirlo de otro selector simple si ocurriera en cualquier otro lugar en un selector compuesto. Un selector universal, a pesar de estar representado por un asterisco, realmente significa "cualquier tipo de elemento", un selector de tipo comodín, si se quiere, por lo que sigue la misma regla para los selectores de tipo.

También consulte la próxima norma que considera cambios más significativos (y define el término "selector compuesto").

Tengo algunas notas para agregar:

Probablemente ahora es ampliamente conocido que los motores de selección nativos utilizados por la mayoría de los navegadores evalúan los selectores en orden de derecha a izquierda . Existe una idea errónea de que esto se aplica al nivel de selector simple; no es asi. No estrictamente, de todos modos. Hay varias optimizaciones que dan cuenta de algunos casos comunes, como la presencia de selectores de ID, la presencia de selectores de clase, la presencia de pseudo-clases dinámicas, etc. Estas optimizaciones casi siempre tienen lugar independientemente de su posición en un selector compuesto. Nadie en su sano juicio miraría primero el selector simple más a la derecha, cuando realmente es el tipo o selector de ID lo que más importa, especialmente cuando considera que la mayoría de los autores ubican el ID cerca del inicio, y el selector de tipo solo puede aparecer en el comenzando.
Voy a entrar en muchos más detalles, con ejemplos, en mi respuesta a esta pregunta sobre el tema del orden de selector simple con respecto a los motores de selector.
Está implícito que el motor selector de jQuery Sizzle sigue las mismas reglas, pero tenga en cuenta que, al igual que los integrados en los motores de diseño, esta no es más que una implementación del estándar. La naturaleza completa de las implementaciones es que todos hacen algunas cosas de manera similar y otras de manera bastante diferente, por lo que el rendimiento no puede calificarse en un nivel extremadamente granular.
Sin embargo, es de sentido común que cuantos menos selectores simples en una secuencia, menos trabajo tiene que hacer el motor de selección al evaluar el selector. Solo debe ser tan específico como lo necesite, y no más que eso. Por ejemplo, puede restringir el contexto de un selector de ID con un selector de clase o una pseudoclase, pero casi nunca necesita ir más allá.
También es bien sabido que jQuery optimiza selectores de ID únicos, selectores de clases y selectores de tipo para document.getElementById() , document.getElementsByClassName() y document.getElementsByTagName() respectivamente. Puede calificarlos con otros selectores y aún funcionará, pero pierde estas rutas de optimización como una compensación. Existen optimizaciones similares en los motores de selección nativos, pero eso es en lo que respecta a las similitudes, que a los autores les importan de todos modos.
Hablando de jQuery, debido a que su pregunta está etiquetada en ambos jquery-selectores css-selectores , tenga en cuenta que jQuery no admite ciertas pseudo-clases dinámicas tales como :hover . El principio básico sigue siendo el mismo, sin embargo. (Como se menciona en un comentario, puede detectar elementos que están actualmente :hover en el momento en que se llama si se pasó a document.querySelectorAll() , pero por razones obvias, esto casi nunca es útil).

Entonces, en resumen: no se preocupe por el rendimiento cuando se trata de ordenar selectores simples. Cualquier desviación en el rendimiento suele ser intrascendente, con solo las excepciones más obvias. La sintaxis no impone ninguna otra restricción, excepto la que se menciona arriba. Todo lo que tiene que hacer es evitar la sobrecalificación y ser consecuente.

Por ejemplo, aquí es cómo pido mis selectores simples: la sintaxis me permite elegir cualquier orden que me guste, y esto es justo lo que se siente bien para mí:

a#id[attr=val].class1.class2:nth-child(n):link:hover