What does this picture mean?


I wondering why this css has property > property {

what is the > used for in this case?


CSS child combinator

It matches only direct children of an element.

Ah! Thanks! I typed “what does > mean in CSS” but couldn’t find anything. Thanks for the link!

Could you rephrase this? lol

The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

I think the article does a pretty good job:

“Elements matched by the second selector must be the immediate children of the elements matched by the first selector.”

div > span {
  /* whatever */

The second selector is span and the first selector is div. So this only matches spans which are immediate childred of a div.

  <span>This span will match
    <span>This span will not match because it is not an immediate child of a div</span>

Like I said, learning disability ): Sometimes the way it is worded throws me off. Thank you.

This made WAY more sense than mozilla’s explanation. I’ve always found their explanations hard to understand CSS Descendant & Child Selectors - YouTube

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.