#3.14 Pseudo Selectors part One이전 포스트/코코아 html css2020. 12. 10. 20:15
Table of Contents
Pseudo Selector로 특정한 태그에 스타일을 적용할 수 있다.
아래에 first-child, last-child로 처음과 마지막 span에 다른 배경색을 입혔다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
span:first-child,
span:last-child {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
nth-child를 이용하여 특정한 태그에 스타일을 적용할 수도 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
span:nth-child(2) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
nth-child에 even이나 odd를 줘서 홀수번째나 짝수번째에 색을 입힐 수 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
span:nth-child(even) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
또 3n을 이용하여 3번째마다 스타일을 적용할 수도 있다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: tomato;
height: 100vh;
}
span {
background-color: wheat;
}
span:nth-child(3n) {
background-color: teal;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #3.16 Pseudo Selectors part Two (0) | 2020.12.11 |
|---|---|
| #3.15 Combinators (0) | 2020.12.10 |
| #3.13 Relative Absolute (0) | 2020.12.10 |
| #3.12 Fixed (0) | 2020.12.07 |
| #3.11 Flexbox Part Two (0) | 2020.12.07 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!