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

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; }

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.

TrackbackPrint

Tags:

Categories:

Location: BlogsThe Brave Programmer