What does this picture mean?

HTML-CSS
1

Hello,

I wondering why this css has property > property {

what is the > used for in this case?

image

2

CSS child combinator

It matches only direct children of an element.

3

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

4

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.

5

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.

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

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

7

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

8

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