CSS Shorthand to Identify Multiple Classes

CSS Shorthand to identify multiple classes

It's not possible, currently (with the Selectors 3 recommendation). There isn't a full-fledged regex grammar for CSS, nor is there a way to crunch down parts of multiple selector lists.

Selectors 4 proposes a new :matches() pseudo-class based on Mozilla's original :any() implementation (see this answer for a bit of history):

.foo:matches(.a, .b, .c, .d)

Of course, don't expect browser support for this yet. I might even forget to update this answer when that time comes but... we'll see.

Shorthand CSS for multiple classes with the same style

Short answer is:

[class*=gtlab]:not([class*=-16]):not([class*=-15])

But depending on the rest of your code and expected browser support (IE8?), this may not work.

Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.

Target multiple CSS classes with and/or

The old way:

.a.b, .a.c, .a.d, .a.e, .a.f

The proposed way (that few current browsers support)

.a:matches(.b, .c, .d, .e, .f)

Some browsers implement it as

.a:moz-any(.b, .c, .d, .e, .f)
.a:webkit-any(.b, .c, .d, .e, .f)

See MDN - The :any pseudo-class

Is there a CSS shorthand to write a rule that overrides a property for multiple classes if they are descendants of a specific class?

Maybe you should consider using some of dynamic stylesheet language like LESS. It allows you to make nested classes. Example:

.top {
  .normal {
    font-weight: 400;
  }
  .other {
    font-weight: 700;
  }

}

Will compile to:

.top .normal {font-weight: 400;} .top .other {font-weight: 700;}

Multiple CSS Classes: Properties Overlapping based on the order defined

It depends on which one is declared last in your stylesheet. For example,

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

vs

.two { border: 6px dashed green }
.one { border: 6px dashed orange }

CSS: What is the proper way to deal with multiple classes of Text

1. You determine why it should be large, small, bold, underlined or etc.
2. You write markup which expresses the semantics you determined in 1 using div and span (the semantic free elements) if nothing more appropriate exists and adding class and id if you need something more specific then anything that HTML provides explicitly.
3. You write CSS selectors that match that markup for rulesets that apply those styles

So only use headings if you have headings, and use them in order. h1 for the main heading, h2 for subheadings, h3 for subsubheadings, etc.

If you can't generate a sensible table of contents from the headings, then you almost certainly aren't using them correctly.

---

Related Topics