CSS Selectors 101

I’m preparing some handouts for an 8 hour continuing ed class in Cascading Style Sheets I’ll be teaching at UNM. The class doesn’t get a book so I have to write everything up myself. I thought I’d share some of the handouts here. The first installment: CSS Selectors.

CSS uses rules to apply styles to selected elements in your HTML documents. A rule consists of a selector and a declaration block. The declaration block is composed of pairings of properties and values.

h1 {color: red; background: yellow}

In that rule, h1 is the selector. The declaration block contains two declarations, one setting the color to red, the other setting the background color to yellow.

Types of selectors

  • Element selectors: These are HTML elements (or tags) such as h1, p, blockquote, li, img.
  • Grouped selectors: You can select several HTML elements or classes at one time using a comma separated group of elements.
    h2, p {font-size: 1.4em;}
  • Class selectors: These selectors let you target items that are independent of the HTML elements on the page. You create the names for these yourself. A rule for a class is preceded by a period in the stylesheet.
    .danger {font-weight: bold;}
    The class is then applied to an HTML element on your page:
    <p class=”danger”>Don’t drink Mercury.</p>
    More than one class can be applied to an element. Classes can be applied more than once on any given HTML page.
  • ID selectors: These selectors are also independent of any HTML element on the page and use names you create yourself. An ID selector is used only once per page. In the stylesheet, it is preceded by a pound sign:
    #lead {font-weight: bold;}
    It is applied to an HTML element on your page.
    <p id=”lead”>What a great lede.</p>
  • Attribute Selectors: These selectors allow you to choose elements based on some attribute they may have. For example, anything with the file extension .pdf or anything with a title attribute or anything with an href attribute. Here’s an example that selects something with a particular src attribute:
    img[src="img/students.jpg"] {border: solid 1px black;}
  • Descendent Selectors: These rules apply in certain structural or contextual circumstances based on parent-child relationships in a document. For example,
    p em {color:red;}
    Would apply only to em elements that were nested in (or descended from) p elements.
    li.sidebar a:visited {color:blue;}
    Would apply only to visited links in list items that were within an element with the class sidebar.
  • Adjacent Sibling Selectors: These select an element that immediately follows another element.
    h1 + p {margin-top:0;}
    That selects only p elements that are immediately after h1 elements.
  • Pseudo-Class Selectors: These basically apply to the states that anchor (a) elements may have and include a:link, a:visited, a:hover, a:active, and a:focus. A few other elements can accept pseudo classes, but they are not supported in all browsers.
  • Pseudo-Element Selectors: These insert “fictional” elements into a document .
    p:first-letter (font-size:3em;}
    p:first-line {color:purple;}
    h2:before {content: "]]"; color:silver;}
    label:after {content: " *";}

Resources

Attribute Selectors: They’re Unicorns and Rainbows

5 thoughts on “CSS Selectors 101

  1. Hi Virginia

    Just a small nitpick. In CSS 3 pseudo-elements have a double colon, to distinguish them from pseudo-classes.

    Single colons are supported for legacy reasons for the oldest pseudo-elements, but should be avoided in new code.

  2. Pingback: xhtml css templates – Web Teacher › CSS Selectors 101 | XHTML CSS - Style sheet and html programming tutorial and guides

  3. Thanks, Lars,
    :before and :after were introduced in CSS2. In CSS3 the ::before and ::after syntax is correct and is used to differentiate pseudo-elements from pseudo-classes. Most modern browsers understand the double colon in CSS3, but IE8 and below only understands the single colon.

  4. You’ve got the syntax wrong in the “h1″ example at the top of this article. It should be:

    h1 {color: red; background: yellow}

    With colons after “color” and “red”, not semi-colons.

    • I noticed that typo when I handed this out to the students and corrected it in my class files, but completely forgot about having it copied here. Thanks for pointing it out.

Leave a Reply