The Brave Programmer - Blogging and coding
Not for the faint hearted

Blog Posts From The Brave Programmer


Cascading Style Sheets (CSS) - III - More Selectors


Written by:
2009/03/10 08:24 AM RssIcon

Following on from our previous article on CSS and selectors, where we covered the three primary selectors in a CSS rule, this article will try and cover the other CSS selector and explain their use. Having a good understanding of selector will spare you hours of frustration and perhaps many lines of unnecessary code.

In our previous post on Selectors, we covered the three main types of selector. In this post we will be covering other lesser selectors and various combinations of those the three

  • Descendant selectors
  • GrandChild Selectors
  • Child selectors
  • Universal selectors
  • Adjacent sibling selectors

Descendant selectors

Descendant selectors are used to apply styles to specific areas of your page. Descendant selectors are used to match elements that are descendants of other elements in the document tree. The syntax is normally that of two or more selectors separated by white space. Descendant selectors apply styles to elements that are contained within other elements. Those elements can be in any position in the document tree as long as they are a descendant of the parent in some form.

For example you might have something like:

<h1>Heading <em>hereem> h1>
<p>Lorem ipsum dolor <em>sitem> amet.p>

Your CSS might look like this:

H1 { color: red }
EM { color: red }

This says that the H1 element as well as the EM element will have a font colour of red. That mean all H1 and EM selectors no matter where they are in the document. But what if you wanted only the EM elements in the H1 tag to be blue. You CSS rule might look like:

H1 EM { color: blue }

What this does is, style every EM element blue, but only those that are found to be within, or Descendants of the H1 element. All other EM elements remain with the original styling of red. This removes the need for embedding CSS styling within other elements that you might want to be different.

GrandChild Selectors

You don't have to stop there. You can stipulate as many grandchild descendants as you like. A good example is a list within a list. You can style the elements within second list differently to the first list. For example:

ul ul li { color: green; }
This CSS rule targets list elements within an unordered list, within an unordered list.

Child Selectors

Child selectors are used to select elements that are direct child elements of a parent element. Child selectors will not select all descendants, only direct children. A child selector is made up of two or more selectors separated by ">" For example the following rule sets the style of all P elements that are children of BODY and only a direct child of the BODY element:

BODY > P { line-height: 1.3 }

Note: Child selectors are not supported by Windows Internet Explorer 5, 5.5 and 6, but are supported by most other standards-compliant browsers.

Universal selectors

Universal selectors are used to select any element regardless of their position in the document tree. Just like the universal file selector in an Operating System like Windows, the asterisk "*" is used as the universal selector. For example:

* { color: blue; }

Will color all elements blue.

You can Also combine Descendant selectors and universal selectors. Suppose that you want all EM  elements with a P element to be styled differently that other EM elements. You could do the following:

p * em {color: orange; }

Or suppose that you wish to boldface any UL that's at least a grandchild of a TABLE, given that the TABLE is at least a great-grandchild of the body element. Thus:

body * * TABLE * UL {font-weight: bold;}

Adjacent sibling selectors

Adjacent sibling selectors will select the sibling immediately following an element. Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.  For example, you may wish to target an h3 element, but only h3 elements that immediately follow an h2 element. 

h2 + h3 {margin: -1em; }

You might also want to target in-line selectors such as Strong ad EM. The following example will do the trick:

em + strong {color: blue; }

This example targets the strong text followed by a EM Text.

Well I think that's enough to take in for now. Next we will deal with:

  • Attribute selectors
  • Pseudo-classes
  • Pseudo-elements

Until then, have fun and enjoy.

blog comments powered by Disqus
Blog Updates Via E-mail
 Blog Updates Via E-mail

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email



Latest Comments
 Latest Comments
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Blog Roll
 Blog Roll
<h1>Search Blogs From The Brave Programmer</h1>

Search Blogs From The Brave Programmer

<May 2024>
<h1>News Feeds (RSS)</h1>

News Feeds (RSS)


Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn



Robert - Find me on

Contact Us Now
 Contact Us Now

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf