css snippet explanation

[Mikeyyy]

h1, pre > b, #p > i
{
background: #FFFF99;
box-shadow: 0 0 2px 2px #FFFF99;
}

#A > h1, #A > pre > b, #A > #p > i
{
background: #33CCFF;
box-shadow: 0 0 2px 2px #33CCFF;
}

I understand the background and box shadow parts, but the header part with the > symbols is still confusing to me…

I know what the < h1 > < pre > < b > and < i > tags are…and the #p is all element IDs that equal “p”…can someone please offer their opinion on what’s happening in these two css blocks with the header parts?

Thanks

[stevencrader]

The > means the immediate children.

This [Codepen](http://codepen.io/stevencrader/pen/tmokx “Pen”) has an example.

[Mikeyyy]

Thank you Steven

[Author]

Posts