The Tips Jar: Contextual Selectors

In CSS, a contextual selector is when a style rule is applied to an HTML tag only when it occurs within a specific context. To create a contextual selector you simply list the tags in the nesting order they must appear in before the contextual selector kicks in.

For example, I could have places on a web page where I wanted to use bold text, and other places where I wanted to use italic text, but perhaps when I really want to stress a point I want a background color behind the words if I use bold text inside italic text to create more emphasis than either bold or italic text will create.

To do that, I'd create the following rule:

i b {background-color: burlywood;}

To make a contextual selector, do not separate the selectors with a comma as you would in creating style rules for multiple selectors.

In the above example, the contextual selector will kick in if I nest a bold tag set inside an italic tag set. Here's an example of how that looks:

Here's a sentence in italic type. Now I've added a bold tag nested inside the italic tag set that should invoke a background color. And now I've canceled the bold type so it's back to regular italic text with no background color.

Here's the code I used for the preceding paragraph:

<i>Here's a sentence in italic type. <b>Now I've 
added a bold tag nested inside the italic tag set 
that should invoke a background color.</b> And now 
I've cancelled the bold type so it's back to regular 
italic text with no background color.</i>

Notice how the <i> tag was opened, then the <b> tag was added before the italic tag was canceled. The order of these two tags is what triggered the contextual selector to add the background color. Also notice how I canceled the bold tag before canceling the italics tag. This is proper nesting. Always cancel nested tags in the reverse order they were opened.

Another example of how you might use contextual selectors is to specify the bullet types you want for list items in nested lists. This code:

ol {list-style-type: decimal;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: lower alpha;}
            

...would create a list with numbered list items. If another list was nested inside the first list, those list items would display in upper case letters. If another list was nested inside that list, the list items would be displayed in lower case letters. Here's an example:

1. In Stock Instruments
   1. Guitars
      1. Fender
      2. Alvarez
   2. Drums
      1. Tama
      2. Yamaha
      3. Pearl
2. Out-of-stock Items
   1. Starion Drums
   2. Ibanez Guitars

Sweet and nifty, eh Swifty? Here's the code for that list:

<ol>
<li>In Stock Instruments</li>
   <ol>
      <li>Guitars</li>
         <ol>
            <li>Fender</li>
            <li>Alvarez</li>
         </ol>
      <li>Drums</li>
         <ol>
            <li>Tama</li>
            <li>Yamaha</li>
            <li>Pearl</li>
         </ol>
   </ol>
<li>Out-of-stock Items</li>
   <ol>
      <li>Starion Drums</li>
      <li>Ibanez Guitars</li>
   </ol>
</ol>
            

Note that the indentation in the code isn't what makes the list indent, I indented the code to make it easier to decipher for you. The list items are automatically indented by the browser.

If you want to peak at the source code for this page I've marked the embedded CSS code in the HEAD section that was used to create the examples used in The Tips Jar. It is just like I showed you here in this column.