Question

Possible Duplicate:
Are “div > p” & “div p” same?

Here’s the page i’m using as a reference for CSS, please note that i only started learning HTML/CSS this morning.

I’m confused about two of the selectors, quoting the site, the “div p” selector selects all <p> elements inside <div> elements, and the “div > p” selector selects all <p> elements where the parent is a <div> element.

What is the difference between those two? Examples where these two selectors can’t be used interchangably would be helpful, if possible.

Answer 1

div > p selects only the <p> elements that are immediate children of a <div>.

So:

div > p

will select this paragraph:

<div>
    <p>This is a paragraph</p>
</div>

but will not select this paragraph:

<div>
    <table>
        <tr>
            <td>
                <p>This will not get selected</p>
            </td>
        </tr>
    </table>
</div>