Difference between using > and nothing CSS

Question

Well, this is a really simple question.

I really can't understand what's the real difference between using > and nothing in CSS.

HTML

<p>
    Some text <h3>here</h3>
</p>

CSS

p > h3{
    text-transform: uppercase;
}

p h3{
    text-transform: lowercase;
}

Can someone explain me this?

Thank you.

Check this..http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean — Nikhil N, Sep 21 '13 at 10:30
Refer: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ — Tamil Selvan C, Sep 21 '13 at 10:35
You are aware that paragraphs are not allowed to contain headlines, aren’t you …? — CBroe, Sep 21 '13 at 10:42
@TamilSelvan Thank you, I found this article really interesting. — Andrés Orozco, Sep 21 '13 at 10:44
@CBroe Yes. The thing is that I'm sleepy and tired and I just wanted to write fast and get a rapid answer and I never noticed that error. Sorry. — Andrés Orozco, Sep 21 '13 at 10:46

Denny Mueller · Accepted Answer · 2020-05-25T12:32:03.707

2

p > h3 {} refers only to direct h3 childs of the paragraph

p h3{} refers to every h3 in the paragraph

The first one would not work at this example:

<p>
    Some text <span><h3>here</h3></span>
</p>

edited May 25 '20 at 12:32

answered Sep 21 '13 at 10:38

Denny Mueller

1 Answers1