Why child element stick while using FlexBox-CodePudding

EDIT: I think this is about specificity

Hello!

When i use

.flex-container > div to reach all child div elements and collect 3rd div with .third

and use

.third{
  margin-left:auto;
}

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.third{
  margin-left:auto;
}

<div >
      <div>1</div>
      <div>2</div>
      <div >3</div>
</div>

it is not worked. I want to know why it is not working?

Then i realize when i still use

.flex-container > div to collect all child divs

and get rid of margin-left: 1rem;

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  /* margin-left: 1rem; */
}

.third{
  margin-left:auto;
}

<div >
      <div>1</div>
      <div>2</div>
      <div >3</div>
</div>

it works. I want know why it acts like sticked?

When collecting all child divs with .flex-container > * everything works perfectly

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container > * {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width:5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.third{
  margin-left:auto;
}

 <div >
      <div>1</div>
      <div>2</div>
      <div >3</div>
</div>

CodePudding user response：

That's because .flex-container>div is a more direct selector than just .third.

Basically, margin-left: auto; is not applied to just .third.

More on CSS-specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

See below for an example with the selector .flex-container>div.third:

body {
  min-height: 100vh;
  width: 80%;
  margin: 5rem auto;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  padding: 1rem;
}

.flex-container>div {
  background-color: #f1f1f1;
  display: grid;
  place-content: center;
  width: 5rem;
  height: 5rem;
  font-size: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.flex-container>div.third {
  margin-left: auto;
}

<div >
  <div>1</div>
  <div>2</div>
  <div >3</div>
</div>

CodePudding user response：

This is due to the behavior of the flex box. A flex box is very dynamic and can turn out differently depending on where it is used. Which means that you have to be very specific about an item in a flexbox to make sure that you mean exactly that one. For this reason, you can only address it as follows:

.flex-container div:nth-child(3) { ... },

#third { ... }

.container .third { ... }