CSS 101: Locate and style Web elements with selectors

by Tony Patton | Apr 02, 2007 2:59:00 PM

Tags: Web, Tony Patton, selector, CSS, Web Development Zone Newsletter

Takeaway: Selectors allow Web developers to choose elements for applying CSS styles to them. Tony Patton offers an overview of six of the available selector types.

In the previous installment of my Cascading Style Sheets (CSS) 101 series, I discussed how to handle multiple rules for the same element. This article covers another important CSS feature: selectors, which are used to choose elements within a Web page for styling.

Selector types

There is more than one way to select elements for CSS styling. The various methods include selecting by universal, type, class, ID, descendent, child, adjacent sibling, and attribute selectors. Here's an overview of the types (except adjacent sibling and attribute, which will be covered next week). Caution: Browser support for CSS selectors is inconsistent, but you can use an online guide to gauge whether a selector will work in your target browser.

Universal
Universal selectors let you apply styles to an entire page. Basically, a style is defined without specific elements, classes, etc., so it applies to all elements within a page. This is useful for establishing colors, fonts, and so forth. Universal selectors are applied to all elements on the page, but they can be overridden by more specific selectors. The CSS specification states that an asterisk is used to denote a universal selector. Listing A demonstrates how to use universal selectors to style the background and default fonts for a page.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

Type
One of the most common ways to style elements is via its type. That is, a specific element has its own style defined, and the style is applied to all elements of that type regardless of placement on the page. The example in Listing B demonstrates a type selector for styling all paragraph elements within a Web page.

Using this type selector, all paragraph elements contained within the page (unless overridden by more specific selectors) will have the specific margin and red text. Now you can also establish CSS classes to handle styling specific elements on a page.

Class
Class selectors provide more control than type selectors when determining what is covered by a style. Styles defined by class selectors are applied to all elements that have the class attribute regardless of position within the page. It gives you tighter control over what receives the style. The sample in Listing C demonstrates using a class to format only the first paragraph on the page, so the first paragraph is indented and subsequent paragraphs are not.

Class selectors should not utilize reserved HTML element names like heading, p, h1, and so forth. Also, you can apply more than one class to an element by separating them by spaces. The example in Listing D demonstrates using more than one class to style a specific paragraph.

You can combine class selectors with type selectors to style only certain elements with assigned classes. In this scenario, the element name is followed by the class name with a period between them when the style is defined. The example in Listing E demonstrates this technique as only paragraph elements with the specific class name assigned styled a certain way, while the header with the same class name is styled differently. I'll drill down even further within a page by using an element's ID attribute.

ID
Class selectors allow you to style a group or class of elements, but you can get more granular with your styling by targeting specific elements on a page. Every element on a page may have an ID attribute, and this ID is unique throughout the page. The ID is used by scripting languages like JavaScript to work with the element, but it can also be used for styling.

When defining a style for a specific element ID, a number sign (#) is placed before the ID in the style definition. This tells the system to apply the style to only elements with that ID. A caveat is that since IDs are unique the style may be applied only once as the example in Listing F demonstrates. (Later in the article, I show that styles may also be applied through an element's attributes or properties.)

In this scenario, the ID can be seen and styled as an attribute, but the ID selector always takes precedence over any attribute selectors. While ID selectors allow you to style one specific element on a page, you can also locate any style elements by their context within the page.

Descendant
CSS makes it easy to style elements through their relationship with other elements on the page. With descendant selectors, you locate elements within the document tree as they relate to other elements. It allows you to choose elements that descend from another element either directly or indirectly. For example, you may want to style ordered lists contained within div elements a certain way. Using descendant selections, you specify the path to an element within the page with the elements separated by spaces. The example in Listing G formats a bold element only if it appears within a paragraph element.

Child
Child selectors are closely related to descendent selectors, but they are more specific as you are looking for elements that are direct descendents or children of another element. A child selector is defined by listing the parent element, and the child element is separated by the greater than symbol (>). Child selectors are not supported by Windows Internet Explorer 5, 5.5, and 6, but they are supported by most other standards-compliant browsers. The following example in mimics a previous example by using child selectors as opposed to descendant selectors.

<html>

<head><title>CSS �" Type selectors</title>

<style type="text/css">

p {font-face: arial; font-size: 110%; color: red; background: yellow;}

p > b {margin: 0; font-size: 200%; color: black; font-weight: normal; }

</style><body>

<h1>Test Page</h1>

<p>Hey there.</p>

<p><b>are</b> the items.</p>

</body></html>

Next week, I will complete the tour of selector types by covering adjacent sibling and attribute, as well as explore pseudo classes and elements.