Selector de CSS con punto en ID

La especificación HTML permite puntos (.) En una identificación:

<img id="some.id" />

Sin embargo, el uso de una regla de selección de ID de CSS no coincidirá correctamente:

#some.id { color: #f00; }

La especificación CSS para selectores de ID no menciona este caso. Entonces, ¿asumo que está usando la combinación de un nombre de etiqueta y un selector de clase ? Por ejemplo, una regla CSS de a.classNamese aplicaría a todas las etiquetas de anclaje ( <a>) con un nombre de clase de className, como <a class="className"></a>.

¿Es posible tener una regla de archivo CSS externa que haga referencia a un elemento HTML por su ID que tiene un punto?

No espero que no, ya que CSS especifica que un " identificador " de CSS no incluye el punto como un carácter válido. Entonces, ¿se trata de una discrepancia fundamental entre las especificaciones HTML y CSS? ¿Mi única alternativa es usar un tipo diferente de selección de CSS? ¿Alguien más inteligente que yo puede confirmar o negar esto?

(Quitaría el punto del atributo ID de HTML para simplificar las cosas, pero es una identificación generada por el sistema, por lo que no tengo la capacidad de cambiarla en este caso).

html css css-selectors Jon Adams
fuente

Se podría decir que se trata de un desajuste fundamental entre HTML y CSS. Sin embargo, como son dos idiomas diferentes, no se espera que coincidan; un identificador HTML es un identificador HTML mientras que un identificador CSS es un identificador CSS. Además, CSS también puede diseñar otros lenguajes, no solo HTML (aunque se concedió, CSS se hizo para HTML al principio).

BoltClock

También #some.idestá usando la combinación de ID y selector de clase.

BoltClock

¿Es el ID el único atributo que tiene como gancho de estilo? Sé que está un poco fuera de tema, pero me pregunto por qué querrías usar una identificación en lugar de img o una clase (si está disponible).

Jayx

@Jayx RE "¿Por qué usar una ID en lugar de img (etiqueta) o una clase?" Varía por muchas razones y situaciones. Pero en este caso, era necesario diseñar un elemento específico, no todas las imágenes de la página. Se podría haber usado una clase si se pudiera modificar el HTML, pero en este caso no se pudo modificar ya que fue generado por un sistema fuera de nuestro control.

Jon Adams

Respuestas:

194

Clásico. Justo después de revisar todas las especificaciones para escribir la pregunta, la leí un poco más y descubrí que hay un carácter de escape. Nunca lo había necesitado antes, pero la especificación CSS permite el escape de barra invertida (\) como la mayoría de los lenguajes. ¿Que sabes?

Entonces, en mi ejemplo, la siguiente regla coincidiría:

#some\.id { color: #f00; }

Jon Adams
fuente

Buen trabajo de investigación. Debería haber más preguntas y respuestas como esta, no como "escribir mi código en mi lugar".

Pavlo

buena investigación. Me encontré con esto en una gran aplicación empresarial en la que estoy trabajando. Estaba totalmente perplejo y nunca lo había visto antes. ¿Cuál es el punto de hacer una identificación con un punto?

Anthony

@Anthony: No hay una razón específica para poner un punto en un atributo de ID de HTML. Supongo que a veces los autores simplemente quieren hacerlo. ¿Quizás en algunos casos podría derramarse de los sistemas de implementación subyacentes que podrían usar puntos en los identificadores del código del lado del servidor para el procesamiento de formularios? Estoy seguro de que todos los que lo hacen tienen sus propias razones; pero no hay ninguna razón HTML / CSS para incluirlos.

Jon Adams

Gracias, estaba teniendo problemas con OpenLayers ya que usa puntos en sus identificadores. Por ejemplo: "OpenLayers.Control.Attribution_7". Supongo que ayuda con el código interno donde pueden hacer que el nombre de la variable javascript tenga el mismo valor que el id.

Hoffmann

Estaba considerando agregar una nueva pregunta y escribir mi propia respuesta, pero decidí solo comentar aquí. Si está usando el preprocesador Stylus, necesita usar dos barras invertidas, por ejemplo, #some\\.idpara escapar del carácter especial. Stylus consume la primera barra invertida, dejando la barra invertida restante en el CSS compilado, que logra el resultado deseado que se describe en esta respuesta.

Markrian

También puedes usar img [id = some.id]]

Más información aquí: http://www.w3.org/TR/selectors/#attribute-selectors

SDD512
fuente

Esto puede funcionar en algunos navegadores, pero también he visto errores en los selectores de atributos. Todavía puedes escapar del ., como \.si.

Chris Jaynes