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

Answer 3

Perhaps you could scan the elements for these classes and add a class that you could style.

For instance, scan all elements with the “a.b” class and then add a new “style-ab” class or some such.

I haven’t posted any example code for this as people may want to use vanilla Javascript or jQuery and it’s a simple enough thing to do.

To clarify, my gaming framework does exactly as the OP described so translations could be applied to certain divs and spans. It’s not a nasty way to decide class names, it’s just useful for people creating markup when using a dictionary that has keys for phrases

Answer 4

Yes you can. The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.