Once you have created ID elements on your page, you will probably place additional elements in content inside these IDs. Contextual selectors allow you to control elements inside specific IDs.
Let’s say you defined all p tags to be Arial, size 12, black. However, you have a dark blue div (ID = sidebar) to hold navigation and news on the left side of the page, and the paragraphs inside the news box are showing as black text in a blue box – basically unreadable. You can create a style for the following rule:
#sidebar p
The space between #newsBox and p refers to the fact that the paragraph is inside the newsBox. You essentially read the rule backwards from right to left:
- p controls all paragraphs;
- space means inside of;
- #sidebar refers to the div with ID sidebar
Spaces mean something in CSS rules, so be sure to use them in the proper context. Pun intended.