Sometimes it’s desirable to apply styles to an element that’s a child to a tag. The combinator (>) is used to achieve this.


We place (>) between the elements: parent-selector > child { }

p {
  background-color: aqua;
article > span {
background-color: yellow


  Text inside a span, inside article
    Text inside a paragraph inside a span


article > span will apply the style only to the span tag and not the p child tag.

Result: code result To play around with this example and get a better grasp, check out this codepen

You may follow me on Twitter where I tweet about interesting topics on software development.