// 가상 선택자
- 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자
1. 가상 클래스
2. 가상 요소
1. 가상 클래스, pseudo class
- 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스
- 앞에 ':'를 붙여준다.
:pseudo-class {
property: value;
}
:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()- 문서 구조와 관련된 가상 클래스
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
- :nth-child(n): n번째 자식 요소 선택
- :nth-last-child(n): 밑에서부터 n번째 자식 요소 선택
* n
1. 숫자: index(위치) > 1부터 시작
2. 수열: 2n, 2n+1
3. 수열: even, odd
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style media="screen">
li:first-child { color: rgb(88, 6, 169); }
li:last-child { color: rgb(98, 138, 17); }
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child {
color: orange;
}
li:last-child {
color: rosybrown;
}
li:nth-child(3) {
color: royalblue;
}
li:nth-last-child(3) {
color: coral;
}
</style>
</head>
<body>
<h1>목록</h1>
<ul class="list1">
<li>강아지</li>
<li>고양이</li>
<li>다람쥐</li>
<li>소</li>
<li>돼지</li>
<li>말</li>
<li>코끼리</li>
<li>사자</li>
<li>호랑이</li>
<li>늑대</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(2n){
color: red;
}
li:nth-child(2n+1){
color: aqua
}
</style>
</head>
<body>
<h1>목록</h1>
<ul class="list1">
<li>강아지</li>
<li>고양이</li>
<li>다람쥐</li>
<li>소</li>
<li>돼지</li>
<li>말</li>
<li>코끼리</li>
<li>사자</li>
<li>호랑이</li>
<li>늑대</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tbl {
border: 1px solid black;
border-collapse: collapse;
}
.tbl td {
border: 1px solid black;
padding: 5px;
}
.tbl tr:nth-child(even) td:nth-child(odd) {
background-color: skyblue;
}
.tbl tr:nth-child(odd) td:nth-child(even) {
background-color: paleturquoise;
}
</style>
</head>
<body>
<h1>목록</h1>
<ul class="list1">
<li>강아지</li>
<li>고양이</li>
<li>다람쥐</li>
<li>소</li>
<li>돼지</li>
<li>말</li>
<li>코끼리</li>
<li>사자</li>
<li>호랑이</li>
<li>늑대</li>
</ul>
<table class="tbl">
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
<tr>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
<td>item</td>
</tr>
</table>
</body>
</html>- 앵커 요소와 관련된 가상 클래스
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style media="screen">
a:link { color: blue; }
a:visited { color: rgb(255, 0, 0); }
</style>
</head>
<body>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.daum.net/">다음</a>
<a href="https://www.youtube.com/">유튜브</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a { color: orange; } */
a:link { color: red; } /*브라우저가 한번도 방문하지 않은 상태*/
a:visited { color: green; } /*브라우저가 방문했던 상태*/
</style>
</head>
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버로 이동합니다.</a>
<br>
<a href="https://amazon.com">아마존으로 이동합니다.</a>
</body>
</html>- 사용자 동작과 관련된 가상 클래스
- :focus: 현재 입력 초점을 가진 요소에 적용
- :hover: 마우스 포인터가 있는 요소에 적용
- :active: 사용자 입력으로 활성화된 요소에 적용
※ 순서가 중요하다. active를 hover 앞에 배치하면 작동 x
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style media="screen">
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }
</style>
</head>
<body>
<a href="https://www.naver.com/">네이버</a>
<a href="https://www.daum.net/">다음</a>
<a href="https://www.youtube.com/">유튜브</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover { color: orangered; } /*마우스 커서가 올라가 있는 상태*/
a:active { color: blueviolet; } /*활성화 상태*/
</style>
</head>
<body>
<h1>링크</h1>
<a href="https://naver.com">네이버로 이동합니다.</a>
<br>
<a href="https://amazon.com">아마존으로 이동합니다.</a>
</body>
</html>2. 가상 요소, pseudo element
- 가상 클래스와 마찬가지로 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있다.
- 앞에 ':' 또는 '::'를 붙여준다. (상황에 따라 적절히 사용)
- ::before : 가장 앞에 요소를 삽입
- ::after : 가장 뒤에 요소를 삽입
- ::selection : 마우스로 드래그했을 때 변화를 줄 수 있다.
- content 속성 활용
- ::first-line : 요소의 첫 번째 줄에 있는 텍스트
- ::first-letter : 블록 레벨 요소의 첫 번째 문자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style media="screen">
p::before {
color: rgb(255, 0, 68);
content: "before 가상 요소"
}
p::after {
color: rgb(68, 0, 255);
content: "after 가상 요소"
}
p::first-line {
font-style: italic;
}
p::first-letter {
font-size: 3em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, itaque. Ut porro, natus optio quidem molestiae blanditiis consectetur et cumque ex temporibus architecto non veniam itaque expedita quae laboriosam est. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores officia expedita explicabo odio fugit eum magni veritatis deserunt. Minima itaque similique tempora adipisci, reprehenderit voluptate officia iusto nisi harum?</p>
</body>
</html>
p::selection {
background-color: #fcbf49;
}'클라이언트 > CSS' 카테고리의 다른 글
| CSS 속성 - 색상 (0) | 2023.03.05 |
|---|---|
| CSS 속성 - 단위 (0) | 2023.03.04 |
| CSS 구체성 (0) | 2023.03.04 |
| CSS 선택자 (0) | 2023.03.03 |
| CSS 문법 (0) | 2023.03.03 |
