Style tags perplexing tags

Question

I have a rather difficult time understanding this type of css selector below, or at least how to apply.

p .intro a { color: yellow } 

Answer 1

 p .intro a { color: yellow } 

It will stylize any (reading from right to left)

• a tag
• which is a descendant of any tag with a class (dot is a class selector) intro
• which is a descendant of the p tag

Example (note that the elements are not direct children, but descendants):

 <p> <span> <span class="intro"> <span> <a href="#">I am yellow</a> </span> </span> </span> </p> 

(violin)

Answer 2

This selector will match HTML like this:

 <p> <span class="intro"> <a href="#">I am yellow</a> </span> </p> 

Basically, the a tag is inside the tag with the intro class inside the p tag. They should not be direct children.

Answer 3

The jsFiddle example does not work due to the symmatics. Peep this: Nesting block level elements inside the <p> tag ... right or wrong?

So what you can do is change your markup, for example:

 <p> <span class="intro"> <a href="#">I AM yellow</a> </span> </p> 

or

 <div> <div class="intro"> <a href="#">I AM yellow</a> </div> </div>