Let's start with some obvious ones.

*
* { color: green }
  
Targets all elements in the page.
Element
span { color: orange }
Target all elements in the page with tag span.
#controlId
#spanFirstName { color: red }
By adding # as prefix, we are targeting element with a particluar id. Like in above example element with id spanFirstName will get selected.
.control-class
.common-group { color: blue }
By adding . as prefix, we are targeting element(s) with a particluar css class. Like in above example, elements with css class common-group will get selected.

Example

  • <li></li>
  • <li class="common-group"></li>
  • <li><span></span></li>
<span id="spanFirstName"></span>