Styling tags within tags confusion

Question

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

p .intro a { color: yellow }

Answer 1

p .intro a { color: yellow }

It would style 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 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>

(fiddle)

Answer 2

This selector would match HTML similar to this:

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

Basically, a a tag inside of a tag with a class of intro inside of a p tag. They don't have to be direct children.