Navigation

• Home
• Archives
• About
• Contribute

Search

Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us

Categories

Accessibility

Announcements

Cascading Style Sheets (CSS)

The Document Object Model

General interest

HTML and XHTML

JavaScript

PHP

Search engine optimization

Semantics

Training

Usability

CSS selectors: the basics

Kev Stone | 1 March 2007

For anyone who has been using CSS for some time, CSS selectors become almost second nature. For those who are new to CSS, however, selectors are powerful tools that allow you to write cleaner, more efficient markup. This article will guide you through some of the basic concepts of CSS selectors.

Element selectors

Element selectors are the most basic selectors found in CSS. They allow you to style any HTML element found within your markup, e.g., <p>, <ul>, or <div>. For example:

p {color: blue;}

This example simply makes any text found within a <p> element the color blue.

Group selectors

Group selectors build upon the idea of element selectors but allow you to set the same styles to a number of HTML elements, as opposed to only one. For example, if you wanted to make your <h1> and <p> elements bold, then you could write the styles as follows:

p {font-weight: bold;}
h1 {font-weight: bold;}

This example will get the desired result, but with group selectors you can drastically reduce the size of your stylesheet by simply placing both the selectors on the left side of the style rule, and separating them with a comma, as shown below:

p, h1 {font-weight: bold;}

Note: The comma between the two elements is very important; failure to use a comma will give this rule a completely different meaning and will instead create a descendant selector, which is discussed later.

Class and ID selectors

The previous selectors have dealt with all HTML elements that are found within your HTML document. If you wish to set a style rule for something more specific, the most frequently used options are class or ID selectors. For example, if you have a paragraph in the sidebar of the page, you might want the words in it to have a different color than words on the rest of the page. A class selector for a <p> element is written in the HTML document as:

<p class="sidebar">Lorem ipsum dolor sit… </p>

An ID selector is written as:

<p id="sidebar">Lorem ipsum dolor sit… </p>

The addition of the class/ID selectors now allows you to set various style rules to the <p> elements found within your document, yet also allows you to specify different style rules for the <p> elements which contain a class or ID attribute.

If, for example, you wanted your <p> elements to be the color red, yet wanted two or more <p> elements in the sidebar to be the color blue, then you would assign these <p> elements a class attribute (as shown above) and would write your style rules as follows:

p {color: red;}
p.sidebar {color: blue;}

If you wanted to make only one <p> element the color blue then you would use an ID attribute (as shown above) and would write your style rules as:

p {color: red;}
p#sidebar {color: blue;}

Note: Each ID must be used on only one element on a page. If you wish to assign the specific style rules to more than one element, then you should use a class. For example, only one <p> in an HTML document can have an ID called “sidebar,” whereas, a paragraph and a heading and a list, or three paragraphs could all have the same class. It's also important to note that an ID selector will overrule a class selector that refers to the same element.

Descendant selectors

Descendant selectors allow you to select an element that is a descendant of another specified element. For example, if you wanted to make every <strong> element that is found within a <p> element the color blue, then you could either markup every <strong> element with a class attribute as outlined above, which would be very time-consuming, or you could use descendant selectors. Descendant selectors are written very much like group selectors with the exception that they do not use a comma. In order to make every <strong> element that is found within a <p> element the color blue, you would write your style rule as:

p strong {color: blue;}

Descendant selectors are used regularly at more advanced levels, as they allow authors to specify style rules to various elements, and can quite often allow them to set very specific style rules without needing to use class or ID selectors. For example, it is quite common to see the example below used to style page navigation:

ul#nav li a {color: blue;}

Whilst this may look confusing at first, the key to being able to understand descendent selectors is simply to read them backwards. Taking this into account, the above example therefore states that:

Every <a> element found within an <li> element that is found within a <ul> element with the ID of “nav” (therefore <ul id=”nav”>), is to be colored blue.

This article has outlined a number of the most basic CSS selectors which, if understood clearly, will allow any author to write much more efficient HTML and CSS. This article by no means covers the bulk of what can be done with CSS selectors, yet it does show some of the simplest and most commonly used tasks that they can perform.

Resources

More on CSS selectors can be found at these locations:

• World Wide Web Consortium - CSS Selectors
• Max Design - Selectutorial - CSS Selectors
• 456 Berea Street; CSS 2.1 Selectors Explained - part 1, part 2, and part 3

Permanent link | Filed under: Cascading Style Sheets (CSS)

---

Commenting is closed for this article.