CSS 의사 클래스 작업

<시간/>

(호버, 방문, 비활성화 등) 특정 상태의 요소를 선택하는 CSS 의사 클래스를 사용하여 HTML의 기존 요소에 특정 스타일을 추가할 수 있습니다.

참고 − CSS Pseudo Classes와 Pseudo Elements를 분리하기 위해 CSS3에서 의사 클래스는 단일 콜론 표기법을 사용합니다.

구문

다음은 요소에서 CSS Pseudo 클래스를 사용하는 구문입니다 -

Selector:pseudo-class {
   css-property: /*value*/;
}

다음은 사용 가능한 모든 CSS 의사 클래스 −

Sr.No	의사 클래스 및 설명
1	활성 활성 언급된 요소를 선택합니다.
2	확인됨 선택된 모든 언급된 요소를 선택합니다.
3	비활성화됨 비활성화된 언급된 모든 요소를 선택합니다.
4	비어 있음 자식이 없는 언급된 모든 요소를 선택합니다.
5	활성화됨 활성화된 언급된 모든 요소를 선택합니다.
6	첫째 자녀 부모의 첫 번째 자식인 언급된 모든 요소를 선택합니다.
7	최초 유형 부모의 첫 번째 언급된 요소인 모든 요소를 선택합니다.
8	초점 포커스가 있는 언급된 요소를 선택합니다.
9	마우스 오버 마우스 오버 시 언급된 요소를 선택합니다.
10	범위 내 지정된 범위 내의 값으로 언급된 요소를 선택합니다.
11	무효 유효하지 않은 값으로 언급된 모든 요소를 선택합니다.
12	언어(언어) "언어"로 시작하는 lang 속성 값을 가진 언급된 모든 요소를 선택합니다.
13	마지막 자식 부모의 마지막 자식인 언급된 모든 요소를 선택합니다.
14	마지막 유형 부모의 마지막에 언급된 요소인 모든 요소를 선택합니다.
15	링크 방문하지 않은 언급된 요소를 모두 선택합니다.
16	not(selector) 언급된 요소가 아닌 모든 요소를 선택합니다.
17	n번째 자식(n) 부모의 n번째 자식인 언급된 모든 요소를 선택합니다.
18	n번째 마지막 자식(n) 마지막 자식부터 계산하여 부모의 n번째 자식인 언급된 모든 요소를 선택합니다.
19	n번째 마지막 유형(n) 마지막 자식부터 계산하여 부모의 n번째 언급된 요소인 언급된 모든 요소를 선택합니다.
20	n번째 유형(n) 부모의 n번째 언급된 요소인 언급된 모든 요소를 선택합니다.
21	유일한 유형 부모의 유일한 언급된 요소인 언급된 모든 요소를 선택합니다.
22	외동 자녀 부모의 유일한 자식인 언급된 모든 요소를 선택합니다.
23	선택사항 "필수" 속성이 없는 언급된 요소를 선택합니다.
24	범위를 벗어남 지정된 범위를 벗어난 값으로 언급된 요소를 선택합니다.
25	읽기 전용 "읽기 전용" 속성이 지정된 언급된 요소를 선택합니다.
26	읽기-쓰기 "읽기 전용" 속성이 없는 언급된 요소를 선택합니다.
27	필수 "필수" 속성이 지정된 언급된 요소를 선택합니다.
28	루트 문서의 루트 요소를 선택합니다.
29	타겟 언급된 현재 활성 요소를 선택합니다(해당 앵커 이름이 포함된 URL을 클릭함).
30	유효 유효한 값으로 언급된 모든 요소를 선택합니다.
31	방문함 방문한 언급된 모든 요소를 선택합니다.

예시

CSS Pseudo Class의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

CSS 의사 클래스 작업

예시

CSS Pseudo Class의 또 다른 예를 보자 -

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

div 요소 위로 마우스를 가져가지 않을 때 -

CSS 의사 클래스 작업

div 요소 위로 마우스를 가져갈 때 -

CSS 의사 클래스 작업