[css]nth 아즨차로 이해 해보자

        <div id="circle-wrap">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

.circle{
    width: 246px;
    height: 246px;
    border-radius: 50%;
}

.circle:nth-child(1){
    background-color: transparent;
    border: 1px solid black; 
    /* border 기본 아웃인데 box-sizing:border-box 해주면 안으로 들어가서 아주 작은 디테일이지만 사이즈는 그대로 */
    opacity: 0.2;
}

.circle:nth-child(2){
    background-color: #ffc000;
}

.circle:nth-child(3){
    background-color: #fedd15
}

 

계속 nth안되서 웨안되?했는뎅 이제 이해함

 

odd형제 요소에서 홀수

even형제 요소에서 짝수

<An+B>사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,
    A는 정수 인덱스 증감량,
    B는 정수 오프셋,
    n은 0부터 시작하는 모든 양의 정수를 나타냅니다.

 

:nth-child(odd) 또는 tr:nth-child(2n+1)HTML 표의 홀수번째 행을 나타냅니다.

:nth-child(even) 또는 tr:nth-child(2n)HTML 표의 짝수번째 행을 나타냅니다.

:nth-child(7)임의의 7번째 요소를 나타냅니다.

:nth-child(5n)5 [=5×1], 10 [=5×2], 15 [=5×3], ... 번째의 요소를 나타냅니다.

패턴 공식을 만족하는 첫 번째 값은 0 [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 n은 0부터 증가하기 때문입니다.

다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.

:nth-child(n+7)7번째와 그 이후의 모든 요소, 즉 7 [=0+7], 8 [=1+7], 9 [=2+7], ... 를 나타냅니다.

:nth-child(3n+4)4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], ... 번째의 요소를 나타냅니다.

:nth-child(-n+3)앞에서 세 개의 요소를 나타냅니다.

[=-0+3, -1+3, -2+3]p:nth-child(n)형제 그룹 내의 모든 <p> 요소를 나타냅니다.

단순한 p 선택자와 동일하지만 더 높은 명시도를 가집니다.

p:nth-child(1) 또는 p:nth-child(0n+1)형제 그룹 내의 모든 첫 번째 <p> 요소를 나타냅니다. 

:first-child 선택자와 동일하며 같은 명시도를 가집니다.

p:nth-child(n+8):nth-child(-n+15)형제 그룹 내에서 8번째부터 15번째 까지의 <p> 요소를 나타냅니다