[CSS] CSS 가상 선택자 nth-child, nth-of-type

🐤 study/HTML | CSS

[CSS] CSS 가상 선택자 nth-child, nth-of-type

budtree 2022. 6. 20. 23:09

(1) :nth-child(N)

: 부모 안 모든 요소 중 N번째

(2) M:nth-of-type(N)

: 부모 안 M 요소중 N번째

예제 ) 신호등..?만들기

: div 세개로 각 box들이 구성되어 있다고 가정(고유 이름 x)

<!-- 1-2.html -->
<!-- 신호등같은거 만들기 -->

<head>
    <link rel="stylesheet" href="1-2.css"/>
</head>
<section>
    <div></div>
    <div></div>
    <div></div>
</section>

/*1-2.css*/

div {
    width:100px;
    height:100px;
    margin-left:0;
    background-color:red;
}

div:nth-child(2) {
    background-color:gold;
    margin-left:auto;
    margin-right:auto;
}

div:nth-child(3) {
    background-color:green;
    margin-left:auto;

}

section {
    border:5px dotted gray;
}

특정 방향 정렬을 위해서는 margin-left, margin-light를 auto로 설정하면 됨
첫번째 div는 왼쪽 정렬(default), 두번째 div는 가운데 정렬, 세번째 div는 오른쪽 정렬이므로 각각에 맞게 margin 설정

📋 CSS 선택자 연습 할 수 있는 사이트

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io