Asterisks in HTML Element Class Names

Question

Reviewing Zappos.com's source, I noticed they have many html elements using class names like:

class='gae-click*-*Promos*Join-Zappos-Rewards-Earn-Points-Get-Free-Expedited-Shipping-and-more-Learn-More- images '

I know asterisks can be used in css files themselves, for selectors, but I'm unfamiliar with this on page elements.

Is it a wildcard or something? Or is it just the name of a single class?

@Dekel Any ideas why they separate everything with *'s then? Seems... odd? — SnakeDoc, Oct 26 '16 at 23:02
might be a specific framework they are using the split by `*` and bind events or something based on that. — Dekel, Oct 26 '16 at 23:03
Unfortunately, all 3 answers have 1/3rd of the answer! Looking for someone to combine the other points into a single, concise answer. — SnakeDoc, Oct 26 '16 at 23:16
You know, you can edit the answers and add the missing data :) — Dekel, Oct 26 '16 at 23:17
Added a few more lines there, hope you feel the answer is more complete now :) — Dekel, Oct 26 '16 at 23:21

Michael Benjamin · Answer 1 · 2017-09-25T08:42:55.683

1

As per HTML5 rules, an asterisk is an acceptable value for the class attribute.

Here's a complete explanation: HTML5: Permitted Values for ID & Class Attributes

edited Sep 25 '17 at 08:42

answered Oct 26 '16 at 23:04

Michael Benjamin

346,931
104
581
701

JonSG · Answer 2 · 2016-10-26T23:13:12.700

The class gae-clickGlobal-Header-zapposheaderPromos*Join-Zappos-Rewards-Earn-Points-Get-Free-Expedited-Shipping-and-more-Learn-More- images

is attached to an image element in the (potentially global) header with an alt tag (and title) of Join Zappos Rewards: Earn Points, Get Free Expedited Shipping, and more! Learn More.

Seems like they are just using an overly specific lexagon based class to me.

Though it does seem plausible that they might then select on class^="gae-click" or class~="*Promos*"

Dekel · Accepted Answer · 2016-10-26T23:21:17.880

The * sign is a valid value for class attributes, the usage in Zappos.com's website is probably related to the framework they are using (maybe split by * to bind some events, like click or something).

While checking the CSS there is no definitions related to the classes with the * chars.

Using a class-with-very-long-definition-regarding-some-element can help during development in case you need to relations between elements. This is exactly the same as adding a data attribute if you don't really use it.

A nice use-case is to filter by "keywords" inside the class-names to add events (such as click/hover, using class*="click", for example).

Asterisks in HTML Element Class Names

3 Answers3