태그 안의 요소가 1개인 경우를 지정(first-child:nth-last-child(1))

button {
  &:first-child {
    &:nth-last-child(1) {
      width: 100%;
      border-radius: 5px;
    }
  }
}

*nth-last-child() 

형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴으로 nth-child와 쓰임은 유사함.

 

프로젝트를 진행하다보면 하나의 요소 안에 한개의 자식 컨텐츠가 들어갈 때도, 두개의 컨텐츠가 들어갈 때도 있다.

한개 한개를 다 잡아주는 것도 맞는 방법이지만, 뭔가 최대한 깔끔한 코드를 만들어보려고 발악중

 

scss의 조건문보다는 위처럼 적용하는게 훨씬 간결해질것같아서 사용해봤다~

 

아직 저 상태로 사용 시 생길 버그에 대해서는 검증 전이므로 확인 후 사용할 것