Не удается найти первый-последний и последний-дочерний элемент одновременно, используя стилизованный компонент

Question

Просто поиграйте со стилизованным компонентом в последнее время и просто удивляйтесь, почему я не могу использовать first-child и last-child одновременно, которые я могу применять аналогичные концепции при использовании S CSS

Что я хочу сделать, это иметь настроенный стиль, основанный на том, являются ли они первым или последним потомком RowWrapper, но не повезло. Просто хочу узнать, пропустил ли я какие-то понятия? Заранее большое спасибо.

Ссылочная ссылка:

1. песочница ссылка с использованием стилизованного компонента

2. Тестирование ссылка с использованием S CSS

const RowWrapper = styled.div`

  :first-child {
    border: solid 1px black;
    color: red;
  }

  :last-child {
    border: solid 1px red;
    color: green;

    span {
      font-size: 22px;
    }
  }
`;
`

Answer 1

Вы применяете псевдоклассы к самому компоненту RowWrapper. Чтобы применить их к детям, добавьте >:

const RowWrapper = styled.div`
  >:first-child {
    border: solid 1px black;
    color: red;
  }

  >:last-child {
    border: solid 1px red;
    color: green;

    span {
      font-size: 22px;
    }
  }
`;