728x90
CSS 짝수 홀수 번째 엘리먼트 Select 하기
CSS를 작성하다 보면
여러 태그에 같은 style을 설정할 일이 많은데
Class를 통해 따로 지정하여 style 효과를 설정해도 되지만
홀수번째, 짝수 번째와 같이 교차 효과를 설정할 필요가 있을때는
Selector를 통하여 간단한 코드를 통해 설정이 가능하다.
엘리먼트명:nth-child(even)
짝수번째 엘리먼트 Select
엘리먼트명:nth-child(odd)
홀수번째 엘리먼트 Select
샘플 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Selector Example</title>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>body {
margin : 25px;
}
.container {
display : flex;
flex-direction : column;
}
.item {
width: 50px;
height: 50px;
margin-bottom : 5px;
}
.item:nth-child(even) {
background : lightblue;
}
.item:nth-child(odd) {
background : tomato;
}출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 가로 세로 가운데 정렬 (0) | 2021.03.20 |
|---|---|
| [CSS] 마우스 오버 이벤트 hover (0) | 2021.03.20 |
| [CSS] 변수 Variable 사용하기! (0) | 2021.03.12 |
| [CSS] Transition 애니메니션 효과 property duration timing-function (0) | 2021.03.05 |
| [CSS] Background 속성 (0) | 2021.03.04 |
댓글