Sélecteur CSS avec période dans l'ID

La spécification HTML autorise les points (.) Dans un identifiant:

<img id="some.id" />

Cependant, l'utilisation d'une règle de sélection d'ID CSS ne correspondra pas correctement:

#some.id { color: #f00; }

La spécification CSS pour les sélecteurs d'ID ne mentionne pas ce cas. Je suppose donc qu'il utilise la combinaison d'un nom de balise et d' un sélecteur de classe ? Par exemple, une règle CSS de a.classNames'appliquerait à toutes les balises d'ancrage ( <a>) avec un nom de classe de className, comme <a class="className"></a>.

Est-il possible d'avoir une règle de fichier CSS externe qui référence un élément HTML par son identifiant qui contient un point?

Je ne m'attends pas car la spécification CSS spécifie qu'un « identifiant » CSS n'inclut pas le point comme caractère valide. Est-ce donc un décalage fondamental entre les spécifications HTML et CSS? Est-ce que ma seule alternative est d'utiliser un autre type de sélection CSS? Quelqu'un de plus intelligent que moi peut-il le confirmer ou le nier?

(Je supprimerais le point de l'attribut HTML id pour simplifier les choses, mais c'est un identifiant généré par le système, donc je n'ai pas la possibilité de le changer dans ce cas.)

html css css-selectors Jon Adams
la source

On pourrait dire qu'il s'agit d'un décalage fondamental entre HTML et CSS. Cependant, comme ce sont deux langues différentes, on ne s'attend pas à ce qu'elles correspondent; un identifiant HTML est un identifiant HTML tandis qu'un identifiant CSS est un identifiant CSS. De plus, CSS peut également styliser d'autres langages, pas seulement HTML (bien qu'accordé, CSS a été fait pour HTML au début).

BoltClock

Utilise également #some.idla combinaison de l'ID et du sélecteur de classe.

BoltClock

L'ID est-il le seul attribut que vous avez comme crochet de style? Je sais que c'est un peu hors sujet, mais je me demande pourquoi vous voudriez utiliser un identifiant au lieu d'img ou une classe (si disponible).

Jayx

@Jayx RE "Pourquoi utiliser un ID au lieu d'img (tag) ou une classe?" Cela varie pour de nombreuses raisons et situations. Mais dans ce cas, un élément spécifique doit être stylisé, pas toutes les images de la page. Une classe aurait pu être utilisée si le HTML pouvait être modifié, mais dans ce cas, elle ne pouvait pas être modifiée car elle a été générée par un système indépendant de notre volonté.

Jon Adams

Réponses:

194

Classique. Juste après avoir fouillé toutes les spécifications en écrivant la question, je l'ai lu un peu plus et j'ai trouvé qu'il y avait un caractère d'échappement. Je n'en ai jamais eu besoin auparavant, mais la spécification CSS autorise l' échappement de la barre oblique inverse (\) comme la plupart des langages. Qu'est-ce que tu sais?

Donc, dans mon exemple, la règle suivante correspondrait:

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

Jon Adams
la source

Bon travail de recherche. Il devrait y avoir plus de questions-réponses comme celle-ci, pas comme «écrire mon code à ma place».

Pavlo

belle recherche. Je viens de rencontrer cela dans une grande application d'entreprise sur laquelle je travaille. J'étais totalement perplexe et je ne l'avais jamais vu auparavant. quel est le point de faire un identifiant avec un point?

Anthony

@Anthony: Il n'y a pas de raison spécifique pour mettre un point dans un attribut HTML id. Je suppose que parfois les auteurs veulent juste? Peut-être que dans certains cas, il pourrait être purgé des systèmes d'implémentation sous-jacents qui pourraient utiliser des points dans les identificateurs du code côté serveur pour le traitement du formulaire? Je suis sûr que chacun a ses propres raisons; mais il n'y a aucune raison HTML / CSS de les inclure.

Jon Adams

Merci, j'avais des problèmes avec OpenLayers car il utilise des points dans ses identifiants. Par exemple: "OpenLayers.Control.Attribution_7". Je suppose que cela aide avec le code interne où ils peuvent avoir le nom de la variable javascript avoir la même valeur que l'identifiant lui-même.

Hoffmann

J'envisageais d'ajouter une nouvelle question et d'écrire ma propre réponse, mais j'ai décidé de simplement commenter ici. Si vous utilisez le préprocesseur Stylus, vous devez utiliser deux barres obliques inverses, par exemple #some\\.idpour échapper le caractère spécial. La première barre oblique inverse est consommée par Stylus, laissant la barre oblique inverse restante dans le CSS compilé, ce qui permet d'obtenir le résultat souhaité décrit dans cette réponse.

markrian

Vous pouvez également utiliser img [id = some.id]]

Plus d'infos ici: http://www.w3.org/TR/selectors/#attribute-selectors

SDD512
la source

Cela peut fonctionner dans certains navigateurs, mais j'ai également constaté des erreurs pour les sélecteurs d'attributs. Vous pouvez toujours échapper au ., comme \.si.

Chris Jaynes