0

I´m trying to get into CSS and have a very simple case where the child selector isn´t working as I expect. I just don´t get it.

My html:

<div>
    <p>
        <div>Div 1</div>
        <div>Div 2</div>
        <span>Span 1</span>
    </p>

    <span>Span 2</span>
</div>

Now whether:

p span {
    color: red;
}

NOR: 

p > span {
    color: red;
}

target any of my span elements. I would assume that both would target my "Span1" span element.

Whereas 

div span {
    color: red;
}

AND 

div > span {
    color: red;
}

target BOTH my span elements (I would assume only the first would affect both spans and the latter would affect only the "Span2" span element.

Can someone please help me? Thank you.

thoros1179
  • 353
  • 1
  • 3
  • 14
  • 2
    If I remember right, you can't have a `div` under a `p` tag and so the UA will insert a closing `` before the child `div` (and some UAs insert an opening `

    ` just before the closing `

    `. So effectively all your elements become a child (direct) of the topmost `div`.This is the reason why the selectors work in the way they are.     – Harry Mar 19 '16 at 09:52
  • http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – Harry Mar 19 '16 at 09:53

2 Answers2

1

https://jsfiddle.net/1t1z4674/

Look at the fiddle.

<div> inside <p> is invalid, therefore your CSS will not work.

Refer to this answer https://stackoverflow.com/a/10763952/822426

From the fine specification:

p – paragraph

[...]

Permitted contents

Phrasing content

And what is this Phrasing content? Phrasing content:

Consists of phrasing elements intermixed with normal character data.

Normal character data is just that: unmarked up text. Phrasing elements are:

a or em or strong ... [a bunch of other elements none of which are div]

So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

<p></p><div></div><p></p>

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Your reference at about.com disagrees with the specification at w3.org, your reference is misleading you.

Community
  • 1
  • 1
Jack
  • 5,680
  • 10
  • 49
  • 74
  • Thank you. It´s funny because the exact sample I provided is from a book "Beginning JavaScript" by Jeremy McPeak. One should assume that samples provided in learning books contain valid code. – thoros1179 Mar 19 '16 at 10:33
-1

you can try this:

<html>
<head> 
<style>
span {
    color: red;
}
</style>
</head>
<body>
<div>
    <div>
        <p>Div 1</p>
        <p>Div 2</p>
        <span>Span 1</p>
    </div>
    <span>Span 2</span>
</div>
</body>
</html>

If you want to reference through css. then add class in span and add css that perticular class.

kishan Radadiya
  • 788
  • 6
  • 14
  • Did you test your suggestion? –  Mar 19 '16 at 10:04
  • The `p` element is autoclosed before the `
    `. So this code is invalid (there is an extra ``, and the indentation is misleading.
     – Oriol Mar 19 '16 at 11:53