[CSS]nth-child 다양하게 활용하기

nth-child 간단 사용법

<nav>
    <ul class="box_1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_2">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_3">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_4">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_5">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_6">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="box_7">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

위와 같은 소스에서 li 전체에 스타일을 줄 때는 ul에 있는 클래스를 지정해준 후 css를 적용하면 해당 ul의 자식인 li에게 스타일을 한번에 적용해 줄 수 있습니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 첫번째 자식을 선택*/
    nav ul.nth-child(1) {border:1px solid red;}

    /* nav의 자식인 ul 중 세번째 자식을 선택*/
    nav ul.nth-child(3) {border:1px solid green;}

위와같이 nth-child()를 사용하여 부모의 자식 요소 중 선택한 자식요소만 선택할 수 있습니다.

first-child 와 last-child

두번째로 알아볼 방법은 부모의 자식 요소 중 첫번째 자식과 마지막 자식만 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 첫번째 자식을 선택*/ 
    nav ul:first-child {border:1px solid red;}

    /* nav의 자식인 ul 중 마지막 자식을 선택*/ 
    nav ul:last-child {border:1px solid yellow;}

첫번째 자식을 선택하는 경우 nth-child(1)을 사용하여 선택을 할 수 있지만 다른 방법으로는 first-child를 이용하는 방법이 있습니다. last-child 의 경우 부모의 자식 요소중 마지막 자식을 선택하게 됩니다.

nth-child(n + 1)

세번째로 알아볼 방법은 n번째를 포함한 이후의 자식들을 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 3번째 자식 이후 모든 자식요소에 적용 */
    nav ul:nth-child(n + 3) {border:1px solid green;}

    /* nav의 자식인 ul 중 3번째 자식 이후 2의 배수 자식요소에 적용 */
    nav ul:nth-child(2n + 3) {border:1px solid yellow;}

nth-child(n + 1)의 사용법은 조금 다양하게 사용이 가능한데 글로 설명하는 것 보단 그림으로 보는 것이 이해하기 조금 더 쉬을 듯하여 그림으로 대체하겠습니다!

• nth-child(n + 3)

• nth-child(2n + 3)

• nth-child(3n + 2)

• nth-child(4n + 4)

nth-child(2n)

네번째로 알아볼 방법은 ?n 의 배수인 자식요소를 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 2의 배수인 자식요소에 적용 */
    nav ul:nth-child(2n) {border:1px solid green;}

    /* nav의 자식인 ul 중 3의 배수인 자식요소에 적용 */
    nav ul:nth-child(3n) {border:1px solid yellow;}

• nth-child(2n)

• nth-child(3n)

• nth-child(4n)

• nth-child(5n)

nth-child(-n + 7)

다섯번째로 알아볼 방법은 -n 의 배수를 ? 번째자식요소까지 선택하는 방법입니다. 단 시작점 기준은 ? 의 숫자에 따라 달라진다. 이것도 역시 말로 설명하기보단 그림으로 대신하는게 빠를 듯 하여 그림으로 대체하겠습니다..!

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 1의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-1n + 7) {border:1px solid green;}

    /* nav의 자식인 ul 중 2의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-2n + 7) {border:1px solid yellow;}

• nth-child(-1n + 7) 7번째 자식까지의 경우

• nth-child(-2n + 7) 7번째 자식까지의 경우

• nth-child(-3n + 7) 7번째 자식까지의 경우

• nth-child(-2n + 6) 6번째 자식까지의 경우

• nth-child(-3n + 6) 6번째 자식까지의 경우

nth-child(n + 3):nth-child(-n + 6)

여섯번째로 알아볼 방법은 ?번째부터 ??번째 자식까지만 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 1의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(n + 3):nth-child(-n + 5) {border:1px solid green;}

    /* nav의 자식인 ul 중 2의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-n + 3):nth-child(-n + 7) {border:1px solid yellow;}

• nth-child(n + 3):nth-child(-n + 5)

• nth-child(n + 5):nth-child(-n + 8)

nth-child(2n)Permalink

네번째로 알아볼 방법은 ?n 의 배수인 자식요소를 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 2의 배수인 자식요소에 적용 */
    nav ul:nth-child(2n) {border:1px solid green;}

    /* nav의 자식인 ul 중 3의 배수인 자식요소에 적용 */
    nav ul:nth-child(3n) {border:1px solid yellow;}

• nth-child(2n)

• nth-child(3n)

• nth-child(4n)

• nth-child(5n)

nth-child(-n + 7)Permalink

다섯번째로 알아볼 방법은 -n 의 배수를 ? 번째자식요소까지 선택하는 방법입니다. 단 시작점 기준은 ? 의 숫자에 따라 달라진다. 이것도 역시 말로 설명하기보단 그림으로 대신하는게 빠를 듯 하여 그림으로 대체하겠습니다..!

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 1의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-1n + 7) {border:1px solid green;}

    /* nav의 자식인 ul 중 2의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-2n + 7) {border:1px solid yellow;}

• nth-child(-1n + 7) 7번째 자식까지의 경우

• nth-child(-2n + 7) 7번째 자식까지의 경우

• nth-child(-3n + 7) 7번째 자식까지의 경우

• nth-child(-2n + 6) 6번째 자식까지의 경우

• nth-child(-3n + 6) 6번째 자식까지의 경우

nth-child(n + 3):nth-child(-n + 6)Permalink

여섯번째로 알아볼 방법은 ?번째부터 ??번째 자식까지만 선택하는 방법입니다.

    /* nav의 자식인 ul 전체에 적용 */
    nav ul {border:1px solid blue;}

    /* nav의 자식인 ul 중 1의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(n + 3):nth-child(-n + 5) {border:1px solid green;}

    /* nav의 자식인 ul 중 2의 배수 li를 5번째 li 까지의 자식에게 적용 */
    nav ul:nth-child(-n + 3):nth-child(-n + 7) {border:1px solid yellow;}

• nth-child(n + 3):nth-child(-n + 5)

• nth-child(n + 5):nth-child(-n + 8)