-1

Why are we using the "greater than" symbol in CSS when we implement properties of flex and grid? I've given a sample code below:

.flex-item > div {}

Help me, please.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Aneesh Edavalath S
  • 94
  • 1
  • 10
  • It’s a concatenation element. It means that the rule applies to any div inside the element with class flex-item. It’s css wide, not only for flex or grid – Lelio Faieta Jul 03 '20 at 18:53

2 Answers2

1

This means 'every div that's a child of flex-item'

> is used to select the element with a specific parent.

Akshay K Nair
  • 1,107
  • 16
  • 29
0

> symbol isn't related to flex but it's part of CSS selector syntax. It is used to select immediate children. Here's an example:

<div class='first'>
    <div class="second">
        <div class="third">...</div>
    </div>
    <div class="second">
        <div class="third">...</div>
    </div>
    ...
</div>

Now

.first > div {
}

will only apply to the divs with second class, since third isn't immediate children of first.

mozkomor05
  • 1,367
  • 11
  • 21