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 class="flex-container">
<div>1</div>
<div>2</div>
<div class="third">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 class="flex-container">
<div>1</div>
<div>2</div>
<div class="third">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 class="flex-container">
<div>1</div>
<div>2</div>
<div class="third">3</div>
</div>>Solution :
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 class="flex-container">
<div>1</div>
<div>2</div>
<div class="third">3</div>
</div>