css로 요소 1개인지 체크방법

아주 가끔씩 쓰게되서 찾게되는

css 선택자로 요소 1개 체크하는 방법...

 

 

:fisrt-child:last-of-child(1)

 

 

코드 예시

<div class="btns">
    <button type="button">버튼 1</button>
    <button type="button">버튼 2</button>
</div>
<div class="btns">
    <button type="button">버튼 1</button>
</div>


<style>
    .btns button:first-child{
        border-radius: 20px 0 0 20px;
    }
    .btns button:last-child{
        border-radius: 0 20px 20px 0;
    }
    .btns button:first-child:nth-last-child(1){
        border-radius: 20px;
    }
</style>

 

 

코드 테스트 화면