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:
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.
|.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|