DM 171: Tutorials: CSS Selectors

Selectors

Selectors define to which XHTML elements a style definition applies. Selectors vary from simple to very complex; here are a few rules and examples to help you create the selector you want.

Click on a tab to reveal its content…

  • Element Name
  • ID or Class
  • Genealogy
  • Pseudo…
  • by Attribute
  • Group and Combine
  • Wild Card

Element Name

The most simple selectors will often be just the XHTML element name, such as h1, p, or strong. Note that the element can be either block level or inline. Suppose you wanted your h1 heading text to be dark gray and paragraph text black, your css might look like this:

h1 {color:#333333}

p {color:#000000}

ID or Class

By assigning an id or class to an element, you can narrow the scope of your style. Assume that the examples above for h1 and p elements are still in effect and you want your first h1 heading to be a dark blue and that several (but not all!) of your paragraphs need to have a teal background. Your code might look like this:

XHTML

<h1 id="firstheading">Big blue first heading</h1>

<p class="contrastback">Paragraph text with teal background</p>

<p class="contrastback">Another paragraph with teal background</p>

CSS

h1#firstheading {color:#000099;}

p.contrastback {background-color: teal}

Remember that you are only allowed to use an id once per page; a class may be used multiple times per page. Note that “contrastback” was chosen as the class name instead of a more literal “teal_background” or something arbitrary like “shazamm.” You may also define your styles using only the id and/or class without using the element name in the selector, it might look like this:

#firstheading {color:#000099;}

.contrastback {background-color: teal}

Now, either of these styles can be applied to any element although the limitation of once per page still applies to ids.

Genealogy

Ancestors, descendants, parents, siblings; did you know that CSS selectors are a family affair? You can use the relationship of XHTML elements to pinpoint their styles.

Ancestors and Descendants

Any element that contains another element is an ancestor, any element contained by another element is a descendant. The “eldest” of XHTML elements is the <html> tag since it contains all other elements which are its descendants.

body p {color:black;}

This style indicates that all paragraphs whose ancestor is the body tag will have black text. The paragraphs could also be contained by other elements (div, blockquote, td, and so on...) and still be affected by the style since the body is an ancestor somewhere along the line.

Parents, Children, and Siblings

Elements and their direct ancestors are the children and parents of the parent/child relationship in CSS. There are no other containing elements between them. Sibling elements are ones contained by the same parent.

HTML

<body>

  <h1>Important Heading</h1>

  <p>First paragraph.</p>

  <p>Some text.</p>

  <div id="content">

    <p>More text.</p>

  </div>

  <p>Next to last paragraph.</p>

  <p>Last paragraph.</p>

</body>

CSS

p {color:black} /* Styles paragraphs generally to have black text */

body>p {color:blue;} /* Styles only child paragraphs of the body element */

body p:first-child {color:red;} /* Styles the first child of the body */

div+p {color:purple} /* Styles the paragraph directly preceded by a sibling div element */

The example above makes the first paragraph red, “Some text” blue, but leaves “More text” black since the initial paragraph styling is the only one that applies. “Next to last paragraph” becomes purple since it is an adjacent sibling to the div element and the “Last paragraph” returns to the original black. The “>’ (less than symbol) in the second definition and the “:first-child” pseudo-class in the third definition are not supported in Internet Explorer 5.5 and 6 but are in version 7. The adjacent sibling selector (+) is reported to work in Firefox, Opera, and IE 7.

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements can be efficient to use since there is no need for any more coding markup, the the state of the element determines the styling. You have already been introduced to the :first-child pseudo-class, here are some more.

:first-letter

:first-letter allows you to style the first letter of an element. These limited properties may be used:

  • font
  • color
  • background
  • text-decoration
  • vertical-align (as long as the element is not floated)
  • text-transform
  • line-height
  • margin
  • padding
  • border
  • float
  • clear

:first-line

:first-line styles the first line of an element.

One of the most common usages is to text-transform the first line of a paragraph to capitals. The browser rendering and user choice of font/size determine exactly what is on that first line.

:first-letter and :first-line are known as pseudo-elements.

Pseudo-classes by State

Applying CSS to hyperlinks allows their appearance to change, depending on their state, producing the popular rollover effect. There are five states and they should be defined the following order:

a:link
a:visited
a:focus
a:hover
a:active

These pseudo-classes may be applied to any element; IE only recognizes them applied to the anchor element.

Selectors by Attribute

You may define a selector by its attibutes , a css example could look like this:

a[title] {border: 3px solid blue}

This style would assign a three pixel solid blue border around any anchor tag that has a title attibute. The square brackets, [ and ], enclose the name of the attibute you are targeting. You may also specify the value of the attibute:

a[title="silly"] {border: 3px solid blue}

Now the border will only be applied to the “silly” titled anchors!

a[title~="silly"] {border: 3px solid blue}

The tilde before the equals sign now makes the style look for anchors whose titles contain the word silly but may also contain others as well. Values like “silly crazy” and “silly funny” would be styled as well as just silly. Silly, yes?

Group and Combine Selectors

Group selectors by using a comma:

h1, h2, h3, h4, h5, h6 {color:teal;}

This style will give all levels of headings teal text. In this instance, one line of code does the job of six individual definitions.

You may also combine selection techniques to narrow the scope of your style as much as you would like.

Wild Card

Finally, the asterisk is the wild card symbol, it stands for any/all elements.

div#funny * {border-bottom:3px yellow dotted;}

*.red {border: 1px red solid;}

The former definition styles a dotted yellow border on the bottom of any element inside the funny IDed div; the latter produces a red border around any element whose class is red.