Team Ravenglass

As I continue my work with the re-design of one of our pages, I re-discovered a specific aspect of CSS that I wanted to share.

To fully understand this concept, you must know that a "Parent" element is an element that contains other elements. The elements contained within a parent element are all referred to as "Children".

We are going to explore CSS's "child selector" and "decendant selector". It's all in the name with these two. The main difference is that the "child selector" only affects immediate children of a parent element, whereas the "descendant selector" affects all of the children, grandchildren and lower, of a particular parent element.

Here are some examples:

Child Selector - uses the > symbol.

This causes any <p> tags that are immediately within the parent element of class "parent" to have a blue border. If there is a <p> tag within a div within another element of class "parent", this is what as known as a "Grandchild" element in relation to the "parent" element and this style will not apply because we are using the Child Selector.

Descendant Selector - requires no special characters. You just place the child element that you want the style to affect, to the right of it's parent.

This causes any <p> tags that are at any level within a parent element of class "parent" to have a blue border. If there is a <p> tag within a div within another element with a class of "parent", this style will be applied. Remember, the key is all descendants of the original parent will have this style.

The best part is, we can mix and match these two selectors:

This code will cause any <p> tag that is a direct child to an element of class "somechild" that is a descendant (at any level) of an element of class "parent" to have the blue border.

This is a fun little way to work with CSS, I hope this helps someone out there!

Til next time, Bridget

This entry was posted on May 8, 2009 at 10:06 AM and has received 3080 views. There are currently 3 comments. Print this entry.