Style Elements with a period (.) In the class name

Question

I have such an element

<span class='a.b'> 

Unfortunately, this class name comes from an e-commerce application and cannot be changed.

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

as

 .ab { } 

Answer 1

 .a\.b { } 

However, there may be browsers that do not support this.

Answer 2

Very late, but you can use the attribute selector.

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

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

---

In addition, here is a complete list of attribute selectors.

Attribute Presence Selector

 // Selects an element if the given attribute is present // HTML <a target="_blank">...</a> // CSS a[target] {...} 

Attribute 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 a 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 diversity 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"] {...} 

Hyphenated Selector Attribute

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

Yes, you can. A CSS class name value, such as ".ab", is for elements that have a CSS name with "a", which also has a class name of "b", which means that you have both classes in the same element. Same as div.cssname targeting div elements using cssname.