descendant selector not working

Question

When I try to target all anchor elements inside the p element using a descendant selector. Rules only apply to child elements and not the nested elements.

p a {
  display: inline;
  color: red;
}

<p>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <div>
    <a href="http://www.channel9.com">channel9</a> 
  </div>
</p>

Its because the div is a block element and it will appear as block untill you make it inline also. — Aslam, Dec 05 '16 at 09:46

score 1 · Answer 1 · answered Dec 05 '16 at 09:52

A p tag cannot have a div tag inside it. Since this is an invalid html your browser corrects that for you. It closes the p tag as soon as it sees the div tag. And also adds a starting p tag for the closing p tag

Your actual HTML

<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
   <div>
        <a href="http://www.channel9.com">channel9</a>  
   </div>
</p>

What it actually renders to

<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
</p>
<div>
   <a href="http://www.channel9.com">channel9</a>  
</div>
<p></p>

And since the a tag with text channel9 is not inside a p tag, your css does not have any effect

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

Seems your html is invalid, try to replace p with div. It should work. Something like below -

div a {
  display: inline;
  color: red;
}

<div>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <div>
    <a href="http://www.channel9.com">channel9</a>  
  </div>
</div>

For details - Why <p> tag can't contain <div> tag inside it?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 05 '16 at 09:46

pradeep1991singh

8,185
4
21
31

1

Clarification: http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – roberrrt-s Dec 05 '16 at 09:49

score 0 · Answer 3 · answered Dec 05 '16 at 09:48

You cannot use div inside a p element

p a {
  display: inline;
  color: red;
}

<p>
  <a href="http://www.reddit.com">Go to Reddit website</a>
  <a href="http://www.quora.com">Go to QUORA</a>
  <span>
    <a href="http://www.channel9.com">channel9</a> 
  </span>
</p>

score 0 · Answer 4 · answered Dec 05 '16 at 09:51

0

<p>
   <a href="http://www.reddit.com">Go to Reddit website</a>
   <a href="http://www.quora.com">Go to QUORA</a>
   <div>
        <a href="http://www.channel9.com">channel9</a>  
   </div>
</p>

css

a {
   display: inline;
   color: red;
}

answered Dec 05 '16 at 09:51

Alex

409
3
18

score 0 · Answer 5 · edited Dec 05 '16 at 10:27

0

Please use this code instead of above code.

.clr-rd a {
  color: red;
  display: inline;
}

<div class="clr-rd">
  <p>
    <a href="http://www.reddit.com">Go to Reddit website</a>
    <a href="http://www.quora.com">Go to QUORA</a>
    <div>
      <a href="http://www.channel9.com">channel9</a> 
    </div>
  </p>
</div>

edited Dec 05 '16 at 10:27

Andrew Bone

7,092
2
18
33

answered Dec 05 '16 at 09:52

M. Lak

903
9
18

descendant selector not working

5 Answers5