Использование вложенных псевдо-css-селекторов с response-emotion

Question

Запуск по странной проблеме.

Ниже приведены два блока кода.Один из них работает хорошо, а другой просто нет.

Эта работа

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // Some other styles
  }

  :first-child:after {
    content: 'F';
  }
`
// After get applied succesfully to the first child

Это не

const StyledButton = styled('button')`
  // Some styles here

  :first-child {
    // some other styles

    :after {
      content: 'F';
    }
  }
`
// After get applied to all nth child.

Я использую react-emotion.

Предназначено ли это поведение или я что-то упустил?Я хочу добиться, чтобы :after применялся только к первому ребенку, используя подход, аналогичный второму.

Answer 1

Я думаю, что есть ошибка в коде на вложенном :after

Изменении, которое, если я прав, решит вашу проблему, чтобы изменить вложенное :after на &:after какИтак:

const StyledButton = styled('button')`
    // Some styles here

    &:first-child {//<====== note the & here
        // some other styles

        &:after { //<====== note the & here
           content: 'F';
        }
    }
}

& является заполнителем для родительского селектора, поэтому приведенный выше код будет компилироваться в:

button:first-child {
    // some other styles
}
button:first-child:after {
      content: 'F';
}

РЕДАКТИРОВАТЬ: Песочница с рабочим примером

Надеюсь, это поможет!

`