I have a really simple angular project with html and scss code. In a container I have 2 objects that I position using flexbox. Everything worked fine with the second object, but the first one just does not work.
Heres my HTML:
<div class="Player">
<p id="Player"> Test </p>
<input class="lineTwo">
<button class="lineTwo">Test</button>
</div>
and heres my scss:
.Player {
position: relative;
width: 80%;
margin: auto;
p {
border: 1px solid rgba($color: #000000, $alpha: 0.3);
font-size: 20px;
padding: 16px;
height: 500px;
}
.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
&:first-child {
left: 0;
width: 50%;
}
&:last-child {
right: 0;
justify-content: center;
width: 50%;
}
}
}
I want both the Input and the button to have a width, but I do not want both to have the same with. If I write it like this:
.lineTwo {
font-size: 15px;
display: flex;
position: absolute;
width: 50%;
&:first-child {
left: 0;
}
&:last-child {
right: 0;
justify-content: center;
}
}
}
...it works just fine and both have a width of 50%, of their parent (except the input is a little bit wider, if you know a solution for this I also appreciate the help).
As I said I dont want both to have the same width so I tried it with the first code but the first child (the Input) does not change. The weird thing is that the button works just fine and if I give him a value like this: width: 75%; it works.
There is no error and I also can not change the height of the Input. It feels like I can't change him at all. If I give the input another tag and try to use this tag with .tag for the &:first-child, still no change.
I am sorry if there are any mistakes in my text I am not a native speaker and thank you for your help in advance.
I'm more familiar with native CSS then SCSS yet from my point of view, The input is not the first-child, it's the p try using first-of-type or simply add another class to distinguish it
About the except the input is a little bit wider make sure to use box-sizing: border-box so the width includes the padding