CSS: Selector Syntax Shortcuts

By Xah Lee. Date: .

Syntax Shortcut for Matching Class Attribute's Value


Element tag with attribute class value of val.

Same as



Any element with attribute class value of val

Same as


Syntax Shortcut for Matching ID Attribute's Value


same as


💡 TIP: normally you don't need the tag, because ID attribute should be unique on a page. There is only one element with a given ID value.


same as


Grouping Selectors

This allows you to specify multiple selectors together.

expr1, expr2, etc

Match any selector expression expr1, expr2, etc.

expr1, expr2, expr3 {abc}

is the same as

expr1 {abc} expr2 {abc} expr3 {abc}

Each of the expr can be a complex selector expression.

make red of all div of class x, or any span:
div.x, span {color:red;}

/* same as */

div.x {color:red;}
span {color:red;}

CSS Selectors