CSS if first element is a dropdown then do something - css

Question

i have CSS issue, i'm looking for some help please :)
so here my page :
There is notification icon at left bottom of the page, some time it can be disabled, so the icon and switch button can disapear. If that disapear, my "Langage" dropdown is moving to left like this :
My problem is i don't know in CSS how to say if "Langage" Dropdown is the first element of my line, then do something (like adding padding for example).
There is a way in CSS to do this ?
I tried something like this :
&:first-child {
margin-left: ${spacings.medium_2};
}
but not working :/
My code (react code):
{projectNotification
&& (
<UserFormLine id="notifications_switch" xs={6}>
<Icon>notifications</Icon>
<SwitchNotifications
id="notification"
checked={user.notify}
onChange={() => handleChangeUserAttribute('notify', !user.notify)}
/>
</UserFormLine>
)
}
<ProjectFormLine id="languageId_formLine" xs={6}>
<DropDown
id="languageId"
source={appLocalesData}
label={formatMessage({ ...messages.user.language })}
value={user.language}
onChange={(value) => handleChangeUserAttribute('language', value)}
/>
</ProjectFormLine>

Answer 1

first-child should be working fine, if you'd like to have some more control on the specificity of the rule, you could try using another attribute to make sure that the style applies to an element that matches that attribute.
In this example, the rule will apply to an element that is the first child of the container, but also has a name attribute with a testinput1 value.
.container {
margin-bottom: 10px;
}
.container input[name="testinput1"]:first-child {
border: 1px solid red;
}
<div class="container">
Container 1
<input class="input" name="testinput1" />
<input class="input" name="testinput2" />
</div>
<div class="container">
Container 2
<input class="input" name="testinput2" />
<input class="input" name="testinput1" />
</div>
<div class="container">
Container 3
<input class="input" name="testinput1" />
<input class="input" name="testinput2" />
</div>
However, looking at your scenario, maybe you want to look into CSS Grid to build your layout, you could set it up so there's always an "empty" column where the notification control should be, so it keeps the other element aligned.
Or use the visibility: hidden property on the notification control as suggested in the comments as well.