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

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