• Design HOME
• Design Page 2
• Design Page 3
• Design Page 4 Rounded Corners
• Design Page 5
         Blend
• Design Page 6
     Columns

• Design Page 7
• Design Page 8
• File Sync Info   Pg 9
• ToolsPage   Pg 10
• TipsPage   Pg 11
• Contact

Design Continuation... page 3

Allllrighty now... We have an interesting situation here. We ran into this in another part of our "new" code, and searches for ways, and it was a little more understandable. However, in this case it is not clear. What?? Well just look at the .article-content class in the example code below. It gets defined and re-defined... or it's being used to define. Which???? ( This is used, and where we ran into this situation, in our, of all places, TipsPage. You will have to look at the source code to see it.)

 Note:  Descendant and Contextual are both used to describe this. we do believe they are trying to make Descendant the "Official" nomenclature.

Contextual selectors

If you just apply styles to a paragraph selector, all paragraphs will be affected. What if you wish to only change the paragraphs inside list items? In that case you need contextual selectors which only apply a CSS rule if a tag occurs in a certain context. A contextual selector is created by listing the tags in the nested order in which they should appear in your document.

In above example only paragraph elements <p> inside list items <li> get red text and only emphasized text <em> in <h1> headings gets a gray background.

Descendant Selectors (another way of describing it)

Descendent selectors select an element based on what its parent element is. You can use this relationship to select a certain type of element only when it is contained by another specified type of element. The first benefit of understanding this model is the ability to define descendant selectors (also known as contextual selectors). Defining descendant selectors is the act of creating rules that operate in certain structural circumstances but not others. As an example, let's say you want to style only those em elements that are descended from h1 elements. You could put a class attribute on every em element found within an h1, but that's almost as time-consuming as using the font tag. It's obviously far more efficient to declare rules that match only em elements that are found inside h1 elements.

In a descendant selector, the selector side of a rule is composed of two or more space-separated selectors. The space between the selectors is an example of a combinator. Each space combinator can be translated as "found within", "which is part of", or "that is a descendant of", but only if you read the selector from right to left. Thus, h1 em can be translated as, "Any em element that is adescendant of an h1 element."
For more info check: Google Books: CSS Definitive Guide

Now then, in the rules, spaces are delimiters, or combinators for Descendant Selector classes ( order is important), commas are delimiters, or combinators for Grouping Selectors (order is NOT important) and we have Periods as delimiters, or combinators for SuClasses.

So now, using the above explanations to decipher the code below:

 .-.-.-.-  prior code
	 #highlight {
		background: #fff;
		padding: 30px 0;
		color: #888;
		font-size: 1.15em;
	}

 .-.-.-.- in between code

	body.home #highlight h2, body.single #highlight h2 {
		margin: 0 0 0.3em 0;
	}

 .-.-.-.- in between code
 
 From the above, we would say that .article-content has the 
 font-size of 1.1em if and only if it is under, or in
 other words a descendent of, a body.single which most of
 the time is the whole page. -But- as far as we can tell
 body.single is a Wordpress specific item.
              space separator
                  
	body.single .article-content {
		font-size: 1.1em;
	}
                   comma separator
                          
	.article-content h3, .article-content h4 {
		margin-top: 1.5em;
	}
	.article-content ul {
		margin: 0 0 1.5em 0;
		padding: 0 0 0 1em;
		list-style-type: square;
	}
	.article-content ol {
		margin: 0 0 1.5em 0;
		padding: 0 0 0 1em;
	}
	.article-content li {
		line-height: 1.6em;
		margin: 0 0 0.5em 1em;
	}
	.article-content p img {
		margin: 0.5em 0;
		padding: 0.5em;
		background: #fff;
		border: 1px solid #ddd;
	}

Reference: Sandbox