-1

anyone can explain it for me , i am studing css layout. But to this code below , i stuck

.container > * {
  padding: 10px;
  flex: 3 100% ;
}

can you explain the "greater than sign & asterisk" in this case?. This is a original code here:

https://codepen.io/cubigamer/pen/OgWqpB?editors=1100

Asons
  • 84,923
  • 12
  • 110
  • 165
Tung
  • 1
  • 3
  • 1
    I edited your question as what you ask has nothing to do with Flexbox, it is all about CSS selectors – Asons Jun 24 '17 at 20:08

2 Answers2

1

The * means all elements,

and the > means immediate children.

So .container > * means all immediate children of container class.

Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
  • 2
    Correct, except the term *immediate children* is redundant. Children are children. I guess they would be *immediate descendants*. – Michael Benjamin Jun 24 '17 at 19:51
  • @Michael_B How is it redundant? `.container > *` means **all immediate children of container class**, while `.container *` means **all children of container class** (in all levels). Am I missing something? – Racil Hilan Jun 24 '17 at 19:53
  • 1
    Yes, you're missing something. I'm not talking about the selector, which is fine (and I upvoted). I am referring to the term itself. All *children* are *immediate descendants* of the parent. *Immediate children* is redundant. You can just call them *children*. – Michael Benjamin Jun 24 '17 at 19:55
  • 2
    Put another way, if you have kids, they are your children. If you have grand kids, they are not your children. They are your descendants. So calling your children my *immediate children* isn't necessary. – Michael Benjamin Jun 24 '17 at 19:58
  • @Michael_B Hmmm! Interesting. So the first level you're calling them *children*, and all subsequent levels you're calling them *descendants*. OK, that's fine and in that case the word *immediate* is redundant as you stated. However, not everybody understands that and often the two words *children* and *descendants* are used interchangeably, so it's probably OK to be redundant for the sake of clarity. But thank you for the note. – Racil Hilan Jun 24 '17 at 20:02
0

Here > is a CSS selector which indicates to the child element and * means all the elements.

So the below example means those styles should apply in all the elements which has container class in parent element 

.container > * {
  padding: 10px;
  flex: 3 100% ;
}
Pawan Kumar
  • 1,374
  • 7
  • 14