Search code examples
cssnested

Difference between using > and nothing CSS

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.

Solution

  • 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>