Styling elements with a dot (.) in the class name

Hay I have an element like this

<span class='a.b'>

Unfortunately this class name comes from an eCommerce application and cannot be changed.

Can I style a class name with a dot in it?

like

.a.b { }

Solution 1:

.a\.b { }

However there could be browsers around that don't support this.

Solution 2:

Coming very late to this party, but you can use attribute selectors.

In your case, to target the class='a.b' element, you could use:

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

Additionally, here is the full list of attribute selectors.

Attribute Present Selector

// Selects an element if the given attribute is present

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

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

Attribute Equals Selector

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

Attribute Contains Selector

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

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

Attribute Ends With Selector

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

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

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

Attribute Spaced Selector

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

Attribute Hyphenated Selector

// 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