Jam's story

[CSS] 의사클래스 종류 본문

WEB/CSS

[CSS] 의사클래스 종류

애플쩀 2022. 5. 24. 16:09 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">

/* 
:empty{
width: 100%;
height: 20px;
background-color: red;
} */
/*비활성화된 요소 
input[type="text"]:disabled{
background-color: #ddd;}  */
/*포커스가 주어진요소
input:focus{
background-color: yellow;
} 
*/
input[type="radio"]:checked, input[type="checkbox"]:checked{
height:30px;
width: 30px;
}
input[type="text"]:required{
background-color: lightpink;
}
</style>
</head>
<body>
<h3>: 의사클래스 </h3>
<pre>
empty: 텍스트가 없는요소 
active
enabled
in-range
invalid
lang(language)
not(selector)
only-child only-of-type
optional
read-only
required
out-of-range
root
target
vaild
</pre>
<div></div>
<p></p>
<p>Maxime illum provident.</p>
<p>Nobis quaerat a.</p>

<form action="">
   <input type="radio" checked="checked" name="gender">male
   <input type="radio"  name="gender">female
   <br>
   <input type="checkbox"  value="bike" checked="checked" />bike
   <input type="checkbox"  value="car" />bike
   <br>
   first name = <input type="text" name="fname"
    autofocus="autofocus" autocomplete="none" required="required"/><br>
   last name =  <input type="text" name="lname" /><br>
   <!-- 비활성화  -->
   address =  <input type="text" name="addr" disabled="disabled" /><br>
</form>
</body>
</html>
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[css] nav 열고 닫기 + transition+ js+jquery  (0) 2022.05.25
[CSS] 의사요소  (0) 2022.05.24
[CSS]:first(last)-child 의 정확한 의미  (0) 2022.05.24
[CSS] 의사클래스  (0) 2022.05.24
[CSS] 선택자 혹은 결합자  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments