web-dev-qa-db-fra.com

Éléments de style avec un point (.) Dans le nom de la classe

Hay j'ai un élément comme ça

<span class='a.b'>

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

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

comme

.a.b { }
60
dotty
.a\.b { }

Cependant, il pourrait y avoir des navigateurs qui ne le supportent pas.

94
RoToRa

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

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

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

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

Sélecteur de présent d'attribut

// Selects an element if the given attribute is present

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

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

Sélecteur d'égalité d'attribut

// 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/"] {...}

L'attribut contient le sélecteur

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

// HTML
<a href="/login.php">...</a>

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

L'attribut commence par le sélecteur

// 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 le sélecteur

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

// HTML
<a href="/docs/menu.pdf">...</a>

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

Sélecteur d'espacement d'attribut

// 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 de trait d'union d'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

35
Matija Mrkaic