What is a child combinators in CSS?-CodePudding

I'm a beginner in studying CSS.
I want to make only child1 red.

as I know div is parents.
p and span.bbb is child combinators.
span.aaa is descendant combinators.
and then
A>B is to select child combinators.
A B is to select descendant combinators.

If I choose div>p, I thought it would be what I wanted. But both child1 and descendant turned red.
Where am I wrong?

@charset "UTF-8";
div>p{
  color:#f00;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="VIEWPORT" content="width=device-width, initial-scale=1.0">
<tilte>combinators.html</title>
<link rel='stylesheet' href='combinators.css'>
</head>
<body>
<div>parents
  <p>child1
    <span class='aaa'>descendant
    </span>
  </p>
  <span class='bbb'>child2
  </span>
</div>
</body>
</html>

CodePudding user response：

I posted 2 example of CSS property. I hope help this.

Example-1

div > p > span {
  color: #f00;
}

Example-2

div > p > span:nth-child(1) {
  color: #f00;
}

CodePudding user response：

Try

div>p:nth-child(1) { }

For more child css selectors check https://css-tricks.com/almanac/selectors/n/nth-child/