• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 1. Using CSS to Position and Sty... > Selectors, Siblings, Descendants, an...

Selectors, Siblings, Descendants, and the Cascade

This next little trick came to my attention through my good friend, and IE5 Mac bug buster, Philippe Whittenberg. I’ll demonstrate it using the navigation for this page. It can be even more spectacular in its style when you’ve got more of a “down state” button or an inline tab-styled list of links. I call it the “you are here” trick. If you’ve styled CSS buttons before, you may have shown the button for the active page in its down state by changing its class or id on each page. If you use templates or Library Items, however, you have to place your navigation in an editable area in order to make those changes. This technique allows you to show a page indicator whether you use server side includes, templates, or Library Items using only the body element and CSS.

Adjacent Sibling Selector Styles

I don’t have space to get deeply into sibling, descendent, or adjacent selector relationships, but the project web site has resources for you to learn more. These selectors can be very powerful. Take a look at a few examples from the project.

With the last group of snippets, we placed the div#content p+h3 and div#info h4+p selectors; these are known as Adjacent Sibling selectors. They allow you to take advantage of two elements that come in a specific order in your page. The first one selects any <h3> element that immediately follows a <p> element that is a descendant of a <div> element with an id attribute that equals content. (<h3> and <p> are siblings in the document tree and are selected only when they are adjacent to each other.)

This particular Adjacent Sibling selector is instructing the <h3> element, which is immediately preceded by a <p> element, to have a top border. I used a 3em line height to force the border away from the h3 header a bit.

The second selector, div#info h4+p, selects any <p> element that immediately follows an <h4> element (siblings) that is a descendant of a <div> with the id of info. In our selector, this causes the first paragraph after the <h4> element in the info div to be centered with a bolded font. Descendant selectors are, in my opinion, underutilized. Take some time to learn more about them.

For further information about CSS Selectors, pattern matching, and Inheritance, see Adrian Senior’s article (www.dwmagic/go/18) and the W3C recommendation for CSS2 on selectors (www.dwmagic/go/19).



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint