Stylisation des éléments dont le nom de classe contient un point (.)

Question

J'ai un élément comme celui-ci

<span class='a.b'>

Malheureusement, ce nom de classe provient d'une application de commerce électronique et ne peut être modifié.

Puis-je styliser un nom de classe avec un point ?

comme

.a.b { }

Answer 1

.a\.b { }

Cependant, il se peut que certains navigateurs ne prennent pas en charge cette fonctionnalité.

Answer 2

Je suis arrivé très tard à cette fête, mais vous pouvez utiliser des sélecteurs d'attributs.

Dans votre cas, pour cibler le class='a.b' vous pouvez utiliser l'élément :

[class~="a.b"] {...}
// or
span[class~="a.b"] {...}

---

En outre, voici la liste complète des sélecteurs d'attributs.

Sélecteur d'attributs présents

// Selects an element if the given attribute is present

// HTML
<a target="_blank">...</a>

// CSS
a[target] {...}

Sélecteur d'attributs égaux

// Selects an element if the given attribute value
// exactly matches the value stated

// HTML
<a href="http://google.com/">...</a>

// CSS
a[href="http://google.com/"] {...}

Sélecteur "Attribute Contains

// Selects an element if the given attribute value
// contains at least once instance of the value stated

// HTML
<a href="http://stackoverflow.com/login.php">...</a>

// CSS
a[href*="login"] {...}

Attribute Begins With Selector

// Selects an element if the given attribute value
// begins with the value stated

// HTML
<a href="https://chase.com/">...</a>

// CSS
a[href^="https://"] {...}

L'attribut se termine par un sélecteur

// Selects an element if the given attribute value
// ends with the value stated

// HTML
<a href="http://stackoverflow.com/docs/menu.pdf">...</a>

// CSS
a[href$=".pdf"] {...}

Sélecteur d'attributs espacés

// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated

// HTML
<a href="#" rel="tag nofollow">...</a>

// CSS
a[rel~="tag"] {...}

Sélecteur à trait d'union de l'attribut

// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated

// HTML
<a href="#" lang="en-US">...</a>

// CSS
a[lang|="en"] {...}

Source : learn.shayhowe.com

Answer 3

Vous pourriez peut-être analyser les éléments pour ces classes et ajouter une classe que vous pourriez styliser.

Par exemple, balayez tous les éléments avec la classe "a.b", puis ajoutez une nouvelle classe "style-ab" ou quelque chose du genre.

Je n'ai pas publié d'exemple de code pour cela, car les gens peuvent vouloir utiliser du Javascript ou du jQuery classiques, et c'est une chose assez simple à faire.

Pour clarifier, mon cadre de jeu fait exactement ce que l'OP décrit afin que les traductions puissent être appliquées à certains divs et spans. Ce n'est pas une façon désagréable de décider des noms de classe, c'est juste utile pour les personnes qui créent du balisage en utilisant un dictionnaire qui a des clés pour les phrases.

Answer 4

Oui, c'est possible. La signification d'un nom de classe CSS comme '.a.b' est de cibler les éléments dont le nom CSS est 'a' et qui ont aussi le nom de classe 'b', c'est-à-dire que vous avez ces deux classes dans le même élément. Tout comme div.cssname qui cible les éléments div avec cssname.