css-selectors hijos - ¿Qué caracteres son válidos en los nombres / selectores de clase CSS?





padre excluir (8)


Para mi sorpresa la mayoría de las respuestas aquí están equivocadas. Resulta que:

Cualquier carácter, excepto NUL, está permitido en los nombres de clase CSS en CSS. (Si CSS contiene NUL (escapado o no), el resultado no está definido. [ CSS-characters ])

Los enlaces de respuestas de Mathias Bynens a explanation y demos muestran cómo usar estos nombres. Escrito en el código CSS, es posible que deba escaparse un nombre de clase, pero eso no cambia el nombre de la clase. Por ejemplo, una representación innecesariamente rebasada se verá diferente de otras representaciones de ese nombre, pero aún se refiere al mismo nombre de clase.

La mayoría de los otros lenguajes (de programación) no tienen ese concepto de escapar nombres de variables ("identificadores"), por lo que todas las representaciones de una variable tienen que verse igual. Este no es el caso en CSS.

Tenga en cuenta que en HTML no hay forma de incluir caracteres de espacio (espacio, tabulación, salto de línea, avance de página y retorno de carro) en un atributo de nombre de clase , porque ya separan las clases entre sí.

Entonces, si necesitas convertir una cadena aleatoria en un nombre de clase CSS: cuida NUL y el espacio, y escapa (en consecuencia para CSS o HTML). Hecho.

¿Qué caracteres / símbolos están permitidos dentro de los selectores de clase CSS? Sé que los siguientes caracteres no son válidos , pero ¿qué caracteres son válidos ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #



He respondido a su pregunta en profundidad aquí: explanation

El artículo también explica cómo escapar de cualquier carácter en CSS (y JavaScript), y también hice una herramienta útil para esto. Desde esa página:

Si le diera a un elemento un valor de ID de [email protected]$%^&*()_+-=,./';:"?><[]{}|`# , El selector se vería así:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('[email protected]$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>



Para aquellos que buscan una solución alternativa, puede usar un selector de atributos, por ejemplo, si su clase comienza con un número. Cambio:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

a esto:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Además, si hay varias clases, tendrá que especificarlas en el selector, creo.

Fuentes:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. ¿Existe alguna solución para que las clases de CSS con nombres que comiencen con números sean válidos?



Para HTML5 / CSS3 las clases y las identificaciones pueden comenzar con números.




La expresión regular completa es:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Por lo tanto, no se permiten todos los caracteres que figuran en la lista, excepto " - " y " _ ", si se usan directamente. Pero puede codificarlos usando una barra invertida foo\~bar o usando la notación de unicode foo\7E bar .




Puedes consultar directamente en la gramática CSS .

Básicamente 1 , un nombre debe comenzar con un guión bajo ( _ ), un guión ( - ) o una letra ( a - z ), seguido de cualquier número de guiones, guiones bajos, letras o números. Hay un problema: si el primer carácter es un guión, el segundo carácter debe ser una letra o un guión bajo, y el nombre debe tener al menos 2 caracteres.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

En resumen, la regla anterior se traduce a lo siguiente, extraído de la especificación W3C. :

En CSS, los identificadores (incluidos los nombres de elementos, las clases y las ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U + 00A1 y superior, más el guión (-) y el guión bajo (_) ; no pueden comenzar con un dígito o un guión seguido de un dígito. Los identificadores también pueden contener caracteres escapados y cualquier carácter ISO 10646 como un código numérico (ver el siguiente elemento). Por ejemplo, el identificador "B&W?" puede ser escrito como "B \ & W \?" o "B \ 26 W \ 3F".

Los identificadores que comienzan con un guión o un guión bajo se suelen reservar para extensiones específicas del navegador, como en -moz-opacity .

1 Todo se complica un poco más con la inclusión de caracteres Unicode escapados (que nadie usa realmente).

2 Tenga en cuenta que, de acuerdo con la gramática que --indent1 , una regla que comienza con DOS guiones, por ejemplo --indent1 , no es válida. Sin embargo, estoy bastante seguro de que he visto esto en la práctica.




Lea la CSS-characters . (Esto es CSS 2.1, encuentre la versión apropiada para su asunción de navegadores)

Edición: el párrafo correspondiente sigue:

En CSS, los identificadores (incluidos los nombres de elementos, las clases y las ID en los selectores) pueden contener solo los caracteres [a-z0-9] y los caracteres ISO 10646 U + 00A1 y superior, más el guión (-) y el guión bajo (_) ; no pueden comenzar con un dígito o un guión seguido de un dígito. Los identificadores también pueden contener caracteres escapados y cualquier carácter ISO 10646 como un código numérico (ver el siguiente elemento). Por ejemplo, el identificador "B&W?" puede ser escrito como "B \ & W \?" o "B \ 26 W \ 3F".

Edición 2: como @mipadi señala en la respuesta de Triptych, hay una caveat , también en la misma página web:

En CSS, los identificadores pueden comenzar con '-' (guión) o '_' (guión bajo). Las palabras clave y los nombres de propiedades que comienzan con '-' o '_' están reservados para extensiones específicas del proveedor. Dichas extensiones específicas del proveedor deben tener uno de los siguientes formatos:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Ejemplo (s):

Por ejemplo, si la organización XYZ agregó una propiedad para describir el color del borde en el lado este de la pantalla, podrían llamarlo -xyz-border-east-color.

Otros ejemplos conocidos:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Se garantiza que un guión o subrayado inicial nunca se utilizará en una propiedad o palabra clave por cualquier nivel actual o futuro de CSS. Por lo tanto, las implementaciones típicas de CSS pueden no reconocer tales propiedades y pueden ignorarlas de acuerdo con las reglas para manejar los errores de análisis. Sin embargo, debido a que el guión inicial o el guión bajo son parte de la gramática, los implementadores de CSS 2.1 siempre deben poder usar un analizador compatible con CSS, independientemente de que admitan alguna extensión específica del proveedor.

Los autores deben evitar las extensiones específicas del proveedor




:not([class])

En realidad, esto seleccionará cualquier cosa que no tenga aplicada una clase css ( class="css-selector" ).

Hice una demo jsfiddle

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

¿Esto es compatible? Sí: Caniuse.com (consultado el 25 de agosto de 2014) :

  • Apoyo: 88.85%
  • Apoyo parcial: 4.36%
  • Total: 93.21%

Edición divertida, estaba buscando en Google por lo contrario de: no. Negación de CSS?

selector[class]  /* the oposite of :not[]*/




css css-selectors