css

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

Bittersweet- 2021. 12. 27. 11:29
728x90
button {
  &:first-child {
    &:nth-last-child(1) {
      width: 100%;
      border-radius: 5px;
    }
  }
}

*nth-last-child() 

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

 

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

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

 

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

 

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

'css' 카테고리의 다른 글

touch-action  (0) 2022.03.24
animation 반복과 반복 사이 delay  (0) 2022.03.11
딥셀렉터 v-deep  (0) 2021.12.27
flex with text-overflow: ellipsis  (0) 2021.12.08
noto sans kr - cdn  (0) 2021.11.30