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

(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

'🐤 study > HTML | CSS' 카테고리의 다른 글

[CSS] flex \| align-items \| justify-content \| flex-direction \| flex-wrap \| layout 배치방법 (2)	2022.06.23
[CSS] 롤오버(hover)란? \| hover 사용법 \| hover 예제 (0)	2022.06.20

(1) :nth-child(N)

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

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

'🐤 study > HTML | CSS' 카테고리의 다른 글

티스토리툴바