CSS Selectors

• element, class, id

  • p {/* style rules */}

  • p.classname {/* style rules */}

  • .classname {/* style rules */}

  • #idname {/* style rules */}

• descendant

  • thead th {/* style rules */}

• wildcard

  • * {/* style rules */}

• pseudo-classes and pseudo-elements

  • a:hover {/* style rules */}

  • input:focus {/* style rules */}

  • li:first-child {/* style rules */}

• attribute value

  • input[type="submit"] {/* style rules */}

• child, sibling

  • body > p {/* style rules */}

CSS Comments

Note the use of comments in CSS -- they start with /* and end with */. Comments can be on a single line or multi-line.

p.vibrate {
  /* These paragraphs will vibrate off the page! */
  color: red;
  background-color: blue;
}
p.subtle {
  /* These paragraphs will
     be subtle and
     probably hard to read */
  color: white;
  background-color: gray;
}