CSS - Understanding child selectors

Question

could anyone explain the difference between these two?

p a {
  color: red;
}

p > a {
  color: red;
}

Thanks.

Answer 1

'p a' will select all 'a' elements that are contained within a p element (descendents), even if they are not immediate children.

'p>a' will only select immediate children of p that are also 'a' elements.

JSFIDDLE https://jsfiddle.net/seadonk/a9mfbbax/

HTML:

<p>
    <a>CHILD A1</a>
    <span><a>DESCENDENT A2</a></span>
    <a>CHILD A3</a>
</p>

CSS:

/* DESCENDENTS WILL BE RED */
p a{
    color: white;
    background-color: red;
}

/* CHILDREN WILL BE BLUE */
p>a {
    background-color: blue;
    color: white
}

See W3C Schools CSS Selector Reference.