CSS Basics - Understanding Selectors

Posted in CSS, (X)HTML, May 17, 2004 | 5 comments

Selectors are a tool within CSS that allow you to ensure that a style is only applied to a set page element, of group of them. In its simplest form, a selector can be simply a tag name. For example, you may have a rule on a web page that looks like this:

h1 {
  font-weight: bold;
  font-size: 1.5em;
  color: #f00;
}

The above will turn all text within <h1> tags large, bold and red. The start of the rule, "h1", tells the user agent to only apply that rule, the large bold redness, to text within <h1> tags. This is a part of CSS1, the first level of CSS. Any browser that supports CSS at all should support basic selectors like these.

However, while the above is useful, it doesn't let you apply styles very specifically to individual elements, or to only a small subset of items of one type, or group. So next, we have classes and ids, used within code to allow us to apply styles to, respectively, elements of a specific group, and unique single elements on a page. You apply these by adding "class" and "id" attributes to the HTML of your document, and then adding selectors to the CSS, like so:

<html>
  <head>
    <style type="text/css"><!--

      p {
        font-size: 0.8em;
      }

      .main_text {
        color: #f00;
      }

      #first_paragraph {
        font-weight: bold;
      }

    --></style>
  </head>
  <body>

    <p id="first_paragraph" class="main_text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

    <p  class="main_text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>

  </body>
</html>

The first selector in the CSS tells the browser that the following style applies to all text within "<p>" tags. The second rule starts with the selector ".main_text", telling the browser that the following rule applies to all elements of class "main_text", the "." telling the browser this rule applies to a class, and the "main_text" identifying that class. The third rules starts with the selector "#first_paragraph". The "#" at the beginning tells the browser that the rule only applies to one element, with the id "first_paragraph".

Again, the above is a part of CSS1, and should be supported by any browser with basic CSS support.

If you want, you can apply styles to elements depending upon their position within a page. For example, if you want to apply styling to any list item in an unordered list, but not ordered lists, you can write a CSS rule like so:

ul li {
  font-weight: bold;
}

The above will make any list item within an unordered list bold. This type of selector, where the style is applies to a specific descendant of an element within the code, will be supported by most browsers with any CSS support, the notable exception being Netscape Navigator 4, which does not understand descendant selectors.

Selectors can be combined as well. For example, if you wanted to apply a style to links within an unordered list, and make one stand out, the following CSS and HTML would do the job admirably:

<html>
  <head>
    <style type="text/css"><!--

      ul a {
        color: #f00;
      }

      ul #unique {
        font-weight: bold;
      }

    --></style>
  </head>
  <body>

    <ul>

      <li>
        <a>First link</a>
      </li>

      <li>
        <a>Second link</a>
      </li>

      <li>
        <a id="unique">Unique link</a>
      </li>

    </ul>

  </body>
</html>

The above will set all links within the list to red, then the link with the id "unique" to bold.

And there you have the basic CSS selectors. Beleive it or not, the simple rules above, when combined (and together with a few creative styles) can create amazing looks for sites with just a few lines of code.