CSS: Selector Syntax Shortcuts

Syntax Shortcut for Matching Class Attribute's Value

tag.val

Element tag with attribute class value of val.

Same as

tag[class~="val"]

.val

Any element with attribute class value of val

Same as

[class~="val"]

Syntax Shortcut for Matching ID Attribute's Value

tag#val

same as

tag[id="val"].

💡 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.

#val

same as

[id="val"].

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;}