CSS если первый элемент выпадающий, сделайте что-нибудь

Question

У меня CSS проблема, мне нужна помощь, пожалуйста:)

так вот моя страница:

Есть значок уведомления в левом нижнем углу страницы его можно отключить, поэтому значок и кнопка переключения могут исчезнуть. Если это исчезнет, ​​мой выпадающий список "Langage" будет двигаться влево следующим образом:

Моя проблема в том, что в CSS я не знаю, как сказать, если "Langage" Раскрывающийся список - это первый элемент в моей строке, затем что-то делаем (например, добавляя отступы).

В CSS есть способ сделать это?

Я пробовал что-то вроде этого:

   &:first-child {
    margin-left: ${spacings.medium_2};
   }

но не работает: /

Мой код (код реакции):

    {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 должно работать нормально, если вы хотите больше контролировать специфику правила, вы можете попробовать использовать другой атрибут, чтобы убедиться, что стиль применяется к элементу, который соответствует этому атрибуту.

В этом примере правило будет применяться к элементу, который является первым дочерним элементом container, но также имеет атрибут name со значением testinput1.

.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>

Однако, глядя на ваш сценарий, возможно, вы захотите взглянуть на CSS Сетка , чтобы построить макет, вы можете установить его так что всегда есть «пустой» столбец, в котором должен быть элемент управления уведомлением, поэтому он сохраняет другой элемент выровненным.

Или используйте свойство visibility: hidden в элементе управления уведомлениями, как предлагается в комментариях.