Styled-components(5) first-child와 last-child 사용하기

 

현업에서 스타일드 컴포넌츠를 쓰기 시작한지 얼마 되지 않은 시점에 당황했던 부분을 잊지 않기 위해 기록을 남겨본다.

styled-components 에서 last-child 를 사용해보자.

 

결과화면 미리보기

<button>이 두 개가 있다.

두 번째 버튼의 margin-left 만 주려고 한다. 이때 나는 last-child 를 사용하고 싶다. 

자, 그럼 styled-components 에서 last-child 를 사용해보자

[다음] 버튼의 margin-left 만 사용하고 싶은 상황이다.

 

 

---

Styled-components(5) first-child와 last-child  사용하기

 

import styled from 'styled-components'; // 일단 임포트 해주시고

 

<Styled_Button>		// 스타일드 컴포넌트로 <button> 들을 감싸주었다
  <button>이전</button>
  <button>다음</button>
<Styled_Button>

 

스타일드 컴포넌트 내에서 &:last-child 를 사용한다

const Styled_Button = styled.div`
  button {
    &:last-child { 	// 마지막 <button> 태그에만 적용이 된다
      margin-left: 15px; 
    }
  }
`;