CSS classname selector


Use classname shorthand notation to assign a cascading style-sheet class selector to a phrase.


Classname shorthand assigns an "class" attribute to a phrase. The syntax is a full-stop "." immediately followed by a CSS class selector.

A phrase may have several classnames applied to it. There are two approaches to doing this:

  • Using separate shorthand for each class
  • Using the generic attribute * shorthand notation
semantax .classname1 .classname2  Textual composition    // option 1
semantax *'classname1 classname2' Textual composition // option 2
Classname shorthand notation

Shorthand attributes should be placed between a phrase's semantax and its textual composition. Shorthand attributes may optionally be preceded by one or more spaces. At least one space must be used after the last shorthand attribute, before the beginning of the textual composition.

A phrase may have any combination of shorthand attributes (#, ., *, ^, `, +, ? ) and they may specified in any order.


Here is what a classname attribute looks like within the body of a manuscript.

menu .menu-group {
li .menu-item Home
li .menu-item Products
li .menu-item Services
li .menu-item Contact
Classname shorthand examples

syntax > shorthand > classnameCSS classname selector

🔗 🔎