CSS 의사 클래스는 서로 다른 요소의 특수 상태를 나타내며, 이러한 클래스는 문서의 기본 요소뿐만 아니라 상태, 위치, 기록 등과 같은 외부 요소도 설명합니다. 이러한 의사 클래스를 사용하여 개발자는 직접 선택할 수 없는 요소의 스타일을 지정할 수도 있습니다. CSS 선택기.
구문
다음은 요소에 CSS 의사 클래스를 사용하는 구문입니다 -
Selector:pseudo-class {
css-property: /*value*/;
} 예시
CSS Pseudo Classes를 사용하는 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input:valid {
color: #fefefe;
background-color: #4CAF50;
}
input:invalid {
color: #fefefe;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
양식 필드에 잘못된 데이터가 있는 경우 -
양식 필드에 유효한 데이터가 있는 경우 -
예시
CSS Pseudo 클래스의 또 다른 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
a {
text-decoration: none;
background:grey;
color: white;
border-radius: 3px;
padding: 6px;
}
input[type="button"] {
border-radius: 10px;
}
:target {
border:4px solid black;
margin: 0 auto;
height: 200px;
width: 200px;
background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
버튼을 클릭하기 전에 -
'타일'을 클릭한 후 버튼 -
'아바타'를 클릭한 후 버튼 -
