✅ 아래 내용들에 대해서 알아보자
- 가상 클래스
- 예제 코드
- 가상 요소
- 예제 코드
가상 클래스
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 가상 클래스
- 가상클래스는 선택하고자 하는 HTML 요소의 특별한 상태를 명시할 떄 사용
- 선택자:가상클래스이름 {속성:속성값;}
대표적인 CSS 가상 클래스
- :link -> 아직 방문하지 않는 요소를 나타낸다. href 속성을 가진 <a> <area> <link>중 방문하지 않은 모든 요소를 선택한다
- :visited -> 사용자가 방문한적이 있는 링크를 나타낸다
- :active -> 사용자가 활성화한 요소를 나타낸다(버튼 누를떄)
- :hover -> 사용자의 마우스 포인터가 요소 위에 올라가 있으면 선택된다
- :focus -> 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 탭하거나 키보드 Tab키로 선택했을 떄 발동한다
- :nth-child -> 형제 사이에서의 순서에 따라 요소를 선택한다
- :not(selector) - not(selector) 안에 포함된 요소를 제외시킨다는 의미
*/
a:link {
color: cyan;
}
a:visited {
color: blue;
}
a:hover {
color: pink;
font-weight: 900;
}
fieldset:hover {
background-color: lightgray;
box-shadow: 0 0 20px grey;
}
a:active {
color: yellow;
}
input:focus {
outline: none;
border: 3px solid red;
box-shadow: 0 0 20px rgb(135, 24, 24);
}
.field {
margin-bottom: 10px;
}
li:nth-child(1) {
background-color: yellow;
}
/* 짝수 자식 */
li:nth-child(even) {
background-color: rgb(226, 217, 217);
}
/* 홀수 자식 */
li:nth-child(odd) {
background-color: rgb(158, 158, 240);
}
li:not(.target) {
font-size: 30px;
}
</style>
</head>
<body>
<fieldset>
<legend>pesudo class</legend>
<div>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.kakao.com">카카오</a>
<a href="https://www.google.com">구글</a>
</div>
</fieldset>
<fieldset>
<legend>focus, before, after</legend>
<div class="field">
<label for="name">이름</label>
<input type="text" id="name" />
</div>
<div class="field">
<label for="age">나이</label>
<input type="text" id="age" />
</div>
<button>보내기</button>
</fieldset>
<fieldset>
<legend>nth-child, not</legend>
<ul>
<li class="target">1content</li>
<li>2content</li>
<li>3content</li>
<li>4content</li>
<li>5content</li>
</ul>
</fieldset>
</body>
</html>
가상 요소