Using CSS selectors

We use CSS to apply particular styles to specific sections of our HTML documents. This post provides a brief overview of CSS terminology, and then explains how to write CSS selectors to find the specific HTML that you want to style.

CSS terminology

Before proceeding, it’s useful to ensure we’re on the same page in terms of definitions. So, consider the following CSS rule:

h4
 {
   background-color: #000; 
   color: #fff;
   font-size: 125%;    
}

When I talk about CSS, I will refer to the following terminology:

Rule

The grouping of everything associated with a selector, including the selector itself. The above example is a complete rule.

Selector

A targeted identification of the HTML that the styles we’re defining apply to. In the above example, h4 is the selector.

Declaration

The grouping of the property and the value assigned to it. In the above example, color: #fff; is a declaration.

Property

A specific style property that we wish to set. In the above example, background-color is a property, as is color and font-size.

Value

The value that we’re setting the property to. In the above example, the value for the color property is #fff.

Common CSS selectors

What follows is an introductory overview of CSS selectors, if you want the official source, see the selector section in the W3C CSS 2 spec.

Selecting an element with an id

<div id="nav">...</div>

Applying a style to just this one and only one DIV tag can be done as so:

#nav
{
   background-color: red;
}

Selecting an element

<cite>...</cite>

Applying a style to all CITE tags is easy:

#nav
{
   color: silver;
}

Targeting all elements belonging to a class

<li class="first">...</li>

Accessing all tags that have class=“first” defined is also very easy:

.first
{
   font-weight: bold;
}

However, this would bold all HTML tags that have the first class. We may decide to only style the first list items like so instead:

li.first
{
   font-weight: bold;
}

What if we want special treatment to the first list items in the navigation section?

#nav li.first
{
   font-weight: bold;
}

Next post (newer)

Running the Cosmos UI on the Mac

Previous post (older)

1GB iPod Shuffle