CODEWITHSUNDEEP
css
user1762554
user1762554

Reputation: 139

Styling tags within tags confusion

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 }

Upvotes: 7

Views: 20248

Answers (3)

Joshua Hamilton
Joshua Hamilton

Reputation: 169

Your jsFiddle example fails because of symantics. Peep this: Nesting block level elements inside the <p> tag... right or wrong?

So what you can do is change your markup to, 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>

Upvotes: 0

Blender
Blender

Reputation: 298076

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.

Upvotes: 2

valentinas
valentinas

Reputation: 4337

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)

Upvotes: 12

Related Questions