Contextual selector

Question

Hi What is contextual selector in css? How it is used?

Hemant Kumar · Answer

We have talked about two types of style sheet selectors these are element selectors which select by element name and class selectors which select by class name. /* a sample element selector */ h1 h2 h3 { color: #000066; } /* a sample class selector */ .important { font-weight: bold; text-decoration: underline; } There are actually many types of selectors or ways of organizing selectors. But rather than confusing the issue by taking them on all at once it is easier to get started with the basics and then come back for the advanced topics after you have had some time to experiment. In this section we are going to talk about contextual selectors which allow you to do even more with style sheets. Simple Contextual Selectors You can use contextual selectors to indicate the context of a selector. The context of a selector is determined by what its parent element is. In other words what the element is nested within or what precedes it in the document. For instance if you wanted to have some form of special formatting for unordered lists inside ordered lists you could write: ol ul { ... } This can be read as for any unordered list that is nested within an ordered list. Thus they style rule will only apply to unordered lists inside ordered lists. The matching of the tag sequence does not have to be exact. As long as one tag is nested inside the other at any level of nesting then the style rule will be applied. In other words if an unordered list were inside a table that was itself inside an ordered list the above rule would still apply. The Child Selector If you want to specify that only those elements that are direct descendants (which is to say first generation children) of a prior tag are to be selected then you use the child selector . The child selector is indicated with the greater than sign or open bracket (>). The child selector only selects an element if it is the immediate child of another element. For instance: ul > ol { ... } This would only select ordered lists that were nested inside unordered list items. If you had an ordered list inside an ordered list which itself was inside an unordered list then the inner ordered list would not be affected by this rule (it is the child of another ordered list) although the outer ordered list would (it is the child of an unordered list). /* style rule 1 - simple context */ ul ol { some rules ... } /* style rule 2 - child selector */ ul > ol { some rules ... } [ . . . ] This is an unordered list Both style rule 1 and style rule 2 would apply here since this element is both a child of an unordered list and has the context of being inside an unordered list. Only style rule 1 would apply here because this has a context of being within an unordered but is not a direct child of that list. The Sibling Selector You can also select items based on whether they are siblings of other elements. By putting a plus sign ( + ) between selectors you can indicate that you only want to select instances of the second selector that are immediately preceeded by the first. For instance I use the following rules to reduce the amount of space between a heading level four element ( ) and a following paragraph. The first set the bottom margin of the heading to zero. The second rule sets the top margin of a paragraph if it is immediately after a level four heading to zero. h4 { margin-bottom: 0px; } h4 + p { margin-top: 0px; }