CSS Selectors: Child vs. Recursive


TAGS: css

For a while I thought there was little difference between div > div and div div in CSS. Turns out there's a pretty drastic difference.

All Child Elements

.container * {
  padding: 1rem;

That will affect all items recursively inside .container. Children, grandchildren, great-grandchildren. You get the idea.

First Level Only

.container > * {
  padding: 1rem;

That will only affect the first level of elements inside container. Just the children, leaving grand-children untouched.