Descendent Selectors

CSS1 called these things contextual selectors; CSS2 and CSS3 call them descendent selectors.

I think the original name might seem simpler: differing by context. The current term, though, is easy to understand as long as you understand your document structure.

As in non-technical language, a descendent is a child, grandchild, great-grandchild (etc) of another element.

I might have <p> text in several different areas of my page — in the banner, the footer, the main content area, and in a sidebar, for example. If each of these areas is a DIV with an class (for example), I can then style the various <p> material by context:

.banner p
.content p
.sidebar p
.footer p

What’s more, I could make a style for <p> (on its own, not as a descendent) to set default style values that I wanted all my <p> text to have. For example, if I made a style for the <p> tag and set the font to “verdana, arial, sans- serif”, all <p> styles would use that font declaration, unless explicitly set otherwise.

However, if I set my .banner p style to be blue, paragraph type in the banner DIV would be blue verdanna, arial, sans-serif.

If I set .content p to .8ems black, paragraph type in the content DIV would be 8ems black verdana etc.

However, if I set my .sidebar p to courier, that would overrule the more general <p> declaration’s font-family.

In other words, descendent selectors are more specific than generic ones.

Other examples:

.content a links within a DIV with an class of content
.content a:hover rollover links within a DIV with a class of content
.sidebar ul unordered lists within a DIV with a class of sidebar
.sidebar li list items within a DIV with a class of sidebar
.sidebar li a:visited visited links inside list items inside a DIV with an ID of sidebar

NOTE: any legal nesting of tags can produce a descendent selector, not just within DIVs:

h1 em emphasized content inside any header1
p strong strong content within paragraphs
#sidebar p em em content within paragraphs with a DIV whose ID is sidebar



4 thoughts on “Descendent Selectors

  1. Pingback: Publishing: Electronic Communications « wrmf.ca

  2. Pingback: CSS Cheat Sheet « wrmf.ca

  3. Pingback: Dreamweaver: Three Column Layout « wrmf.ca

  4. Pingback: Styled Lists of Links « wrmf.ca

Comments are closed.