How to use CSS child combinator to style child tags

Introduction

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
}

HTML:

<article>
  <span>
  Text inside a span, inside article
  <p>
    Text inside a paragraph inside a span
  </p>  
  </span>
</article>

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

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.