Basic CSS question, comparing > to just a space between elements

[csdude55]

Can someone explain the real-world difference between these two?

element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element

I'm taking a guess... maybe this would work in the first example since the P is inside the DIV, but not in the second because it's not the direct parent?

<div>
 <header>
  <p>

[lucy24]

The > means the second element is a child of the first element.
Without the > the second element is any descendant of the first element.

If you wanted to style p in your example,
header p
header > p
div p
would all work, but
div > p
would not.

In real life, of course, most of these would involve classnames in the css. (In my personal case, the most widespread exception is “table p” where I want all paragraphs inside all tables to behave the same way. And no, that’s not using tables for layout ;) )

:: hasty edit when I discover I'd manually typed <i> throughout ::

Edit: Be especially careful with constructions like
header p:first-child
since it doesn't necessarily mean “the first child of the header” but only “the first child of whatever element it’s a child of, so long as the whole thing is inside a header”.

[rainborick]

There's a great reference I rely on frequently for such questions - 30 Selectors You Must Memorize [code.tutsplus.com] - because I could never memorize all of them.

[csdude55]

Thanks for the info! After some thought that's what I was thinking, but the description didn't make that much sense.

@rainborick, this is the reference page I was using:

[w3schools.com...]

I've been using CSS for about 9 years, and never used at least 90% of those! lol I didn't even know half of them existed! Your page definitely has better explanations, though... I guess mine is more of a cheat sheet