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 |