CSS Reference Selectors - San Diego Web Design

Welcome

About

Services

What It Takes to Run a Web Site

Selectors

A selector is a method for applying a style to a number of elements on your page based on a different system from the tag name. This is necessary when you want to create two different styles that should apply to two different "types" of hyperlinks.

Class Selectors

One of the most common ways to differentiate different types of styles is by using Class Selectors. You may be familiar with the class attribute that is used by nearly every HTML element. It looks like the following:

<B class="error">Please try again</B>

The CLASS attribute will differentiate this bold tag with other bold elements found in the HTML document. The class name associates with the class definition in a style sheet and determines its appearance.

.error { color:red }

Just like a normal style that is applied to an element, the styles defined for classes will be inherited by all child elements (unless explicitly overridden.)

ID Selectors

Another mechanism exists to apply a style to a single element in the document. In the same manner as the CLASS attribute, an ID attribute will assign a unique ID to an individual element. This ID may be referenced in the style sheet to define its look.

<STYLE type="text/css">
#231 { color: green }
H2#232 { color: blue }
</STYLE>

<P id="231">
It's not easy being green
</P>
<H2 id=232>Blue Header</H2>

For the paragraph element above, it should be displayed with green text since its ID is "231" and this matches the first line of the STYLE definition.

In the second case (H2#232), we see how an ID may be combined with an element to limit the usage of the ID selector. The "Blue Header" which appears within the H2 tags, should render with a blue font. If we just changed the two H2 tags to H1, the header would no longer render with blue text since the tag name no longer matches the style definition.

Contextual Selectors

One final option allows you to define classes for elements based on their relationship to other elements. You can view all of the tags in an HTML document as having a hierarchical relationship. This means that all of the elements can be organized like a table-of-contents. Each tag has a parent (enclosing) tag and, optionally, a number of child elements.

A contextual selector lets you define a style for a bold (B) tag only when it appears inside a paragraph tag. To do this, we write the tag names separated by spaces with the parent tag on the left and the child on the right.

P B { font-weight: bold; color: #80A090 }

Of course we can create as many levels (of context) deep as we want when defining these selectors. This allows you to be very specific about how elements should be rendered on the page.

TABLE TR TD P B { font-weight: bold; color: #80A090 }

Additionally, we can combine contextual selectors with class and ID selectors allowing you to create even more complex matching algorithms.

TABLE.report TR#123 TD P #23 { font-weight: bold; color: #80A090 }

Table of Contents

Featured Clients

Sarasota Wedding Photographer
CMS Photography needed a website that would help them in search engine rankings. We took the site and redesigned the code to be XHTML Strict validated code that would give them the best foot forward.