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

Question

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 { } 

Answer 1

.a\.b { } 

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

Answer 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