contextual (descendent) selectors
Explanation
The first selector we saw, the HTML element selector, gives developers control over the appearance of their web pages, but it is heavy handed. It's all or nothing, every paragraph or none.
Class selectors give us control over how different kinds, or classes of elements will appear.
Contextual selectors give use fine tuned control over the appearance of HTML elements when they are associated with other HTML elements. They are also referred to as descendent selectors as we will see shortly.
You may or may not use the emphasis or the strong emphasis tags (<em> and <strong>), preferring the italic and bold tags instead. If you keep in mind the golden rule, separate style from content, you'll see that the former tags are to be preferred. So for this example, I'll talk about these logical rather than physical tags.
Usually, the <strong> tag makes text appears by default as bold text in a browser. Using a style sheet, you might override this, making the content of a <strong> element appear in a different color, a different font, or in any number of ways. Let's suppose we want to follow typographical conventions. We'd make <strong> text appear in bold. To do this using an HTML element selector, we'd add the following statement to our style sheet:
strong {font-weight: bold}
But what if we want to use the <strong> element in a heading, and our headings are already bold? With the above statement, the strong text will appear the same as the text around it. What we would like is to have <strong> element's content appear differently when it is in a heading. This is what contextual selectors let us do.
CSS2
CSS2 refers to contextual selectors as Descendant Selectors. This is because they select elements when they are the descendants of particular selectors, that is, when they are contained within particular selectors. A CSS2 selector that is related, and which we will visit shortly is the child selector.
Syntax
The contextual selector is simply a list of HTML element selectors, each separated by a space. For example, the selector for strong elements inside a heading would be created like this
h1 strong {text-decoration: underline}
This statement selects any strong element inside a heading of level 1, and draws it underlined.
You can create contextual selectors of any depth, for instance p li strong selects strong elements only when they are inside list items which are inside paragraphs.
Importantly, this selector can in fact be used with selectors other than HTML element selectors. Returning to our question and answer example, we could create selectors for lists inside question paragraphs, and lists inside answer paragraphs, to give a distinct appearance to each type of list. Our two selectors would be as follows:
P.question li
(list items inside paragraphs of class "question")
P.answer li
(list items inside paragraphs of class "answer")
As we are about to see, there are a number of other types of selector, all of which can be used with contextual selectors in a similar way.
Use
The contextual selector gives us much finer control over the appearance of a page. You may not find yourself using it frequently, but it can be very valuable.
The most immediately obvious way in which contextual selectors are useful is referred to above: when a selected element is going to be contained by another selected element you may want it to have a particular appearance.
There is another, less obvious, but extremely useful way of using contextual selectors. You can select very particular elements with them without having to make a single change to the HTML. Often, when your first idea might be to use a class selector (and therefore you'd have to go and put classes throughout the HTML), you can just as easily create a contextual selector and give it the properties you want. For example, if you want to get rid of those unsightly borders that browsers sometimes place around linked images, all you need do is create a contextual selector that selects images inside links, and give this selector a border of none. Contextual selectors then can save you a lot of coding.
a img {border: none}
Browser support
Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.
next: link pseudo class selectors
(C)1997-2001 Western Civilisation Pty. Ltd./p>