CSS-descendent selector

Question

I would like to know difference between these two lines:

p.intro a{color=# ff99ff;}
p .intro a{color=# ff99ff;}

In first example there is no space between p and .intro, while in second example there is space between them.

I want an explanation with examples.

Have you looked at the spec? There's an explanation with an example there. http://www.w3.org/TR/selectors#descendant-combinators — BoltClock, Jul 27 '12 at 18:21
Your CSS rules are invalid, you should be using colons (`:`) instead of equal signs. — bfavaretto, Jul 27 '12 at 18:23
And you can't have spaces between `#` and the rest of the hex color values. — bfavaretto, Jul 27 '12 at 18:25

score 5 · Answer 1 · answered Jul 27 '12 at 18:22

5

The first is the class given to the p item.

<p class="intro">
    <a href="#">Item</a>
</p>

The second is the class given to the p tag's child.

<p>
    <span class="intro">
        <a href="#">Item</a>
    </span>
</p>

answered Jul 27 '12 at 18:22

Chad

5,308
4
24
36

div inside p is kinda a no-no...http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong – MikeM Jul 27 '12 at 18:24
@mdmullinax This is just an example and div is the most generically used tag. – Mike Brant Jul 27 '12 at 18:25
examples frequently make it into production, span is just as generically used and a good fit – MikeM Jul 27 '12 at 18:26
Eh, I figured it was okay since both were block-level elements. I'll change it though. – Chad Jul 27 '12 at 18:26
1

`p` is known for being a block-level element that doesn't allow any other block-level elements inside it. @Mike Brant: If you read the post that mdmullinax links to, you'll realize that such an example will quite simply not work, making it pretty useless as an example. – BoltClock Jul 27 '12 at 18:36
Got it, thanks. I'd like to consider myself an advanced web dev, but I am still learning stuff every day. There's nothing wrong with doing stuff correctly haha. – Chad Jul 27 '12 at 18:38

score 1 · Accepted Answer · answered Jul 27 '12 at 18:23

1

First rule is for

<p class="intro"><a href="#">some</a></p>

Second is for

<p><span class="intro"><a href="#">some</a></span></p>

answered Jul 27 '12 at 18:23

biesior

55,576
10
125
182

KRyan · Answer 3 · 2012-07-27T18:31:20.320

1

OK, first p.intro a { color: #ff99ff; }

<p class="intro">This <a>link</a> is colored #ff99ff.</p>

<p>But <a>this one</a> is not.</p>

Any a tag within a p that has the intro class gets colored.

Then p .intro a { color: #ff99ff; }

<p class="intro">This <a>link</a> is colored normally.</p>

<p>And so is <a>this one</a>, but <span class="intro"><a>this one</a> is colored #ff99ff.</span></p>

<div>Also, <span class="intro"><a>this link</a></span> doesn't get colored either.</div>

Here, only a tags that are within anything that has the intro class, which is itself within some p, gets colored.

edited Jul 27 '12 at 18:31

answered Jul 27 '12 at 18:25

KRyan

7,308
2
40
68

I understood now. Thanks a lot for your quick right and good explanation with example and meaning. Thanks once again – swati16 Jul 27 '12 at 18:49

score 0 · Answer 4 · answered Jul 27 '12 at 18:22

0

The first will affect all a tags that are descendants of p tags that have the class intro.

The second will affect all a tags that are both descendants of an element (any) with the class intro AND, at the same time, descendants of a p tag.

answered Jul 27 '12 at 18:22

Mitya

33,629
9
60
107

score 0 · Answer 5 · answered Jul 27 '12 at 18:23

0

p.intro a

This finds all <a> that are decenents of <p class="intro">.

p .intro a

This finds all <a> that are decenents of any element with the class intro that are decendants of a <p>.

answered Jul 27 '12 at 18:23

gen_Eric

223,194
41
299
337

Why is your mane of a different color in your profile description? (Highly off-topic, but I couldn't help asking.) – BoltClock Jul 27 '12 at 18:43
@BoltClock: (in character) Because I wanted to dye it pink! It's EXTREME! (IRL) Because I originally had it pink, but I liked black better. I decided to keep both images for some reason. – gen_Eric Jul 27 '12 at 18:52

score 0 · Answer 6 · answered Jul 27 '12 at 18:24

The first case will select all A tags there are nested somewhere below a P tag with class "intro".

<p class="intro"><div><a>This is selected</a></div></p>

The second case will select all A tags that are nested somewhere below any sort of DOM element with a class of "intro" which in turn is nested somewhere in the a P tag.

<p><div><div class="intro"><div><a>This is selected</a></div></div></div></p>

Note that the nested element do not have to be directly below the preceding elements in the selector. They just need to be nested somewhere within the preceding items in the selector.

score 0 · Answer 7 · answered Jul 27 '12 at 18:30

p.intro a{
  color=# ff99ff; 
}

This will effect for <a> that are inside example:

<p class="intro">
    <a href="#">one</a>
</p>

and

p .intro a{
  color=# ff99ff;
}

This will effect for <a> that are inside the class intro which is inside <p>

example:

<p>
    <span class="intro">
        <a href="#">one</a>
    </span>
</p>

CSS-descendent selector

7 Answers7