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

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets (CSS) - III - More Selectors

Mar10

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.

Tags:
Categories:
blog comments powered by Disqus
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

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

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

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

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<August 2017>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

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

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

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
Print