Nov 10, 2018

How to access direct children in CSS

If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol, like so:
div > p { /* Some CSS */ }
This only grabs <p>s that are nested directly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.

Without the > symbol,
div p { /* Some CSS */ }
grabs any <p> that is nested somewhere (directly or indirectly) inside a <div>