Web/CSS
[days03] :의사 클래스 - 특수 상태를 정의하는 클래스
다연
2020. 12. 7. 20:51
반응형
1.
a:link{}
a:visited {}
a:hover {}
a:active {}
2.
:first-child
:last-child
:first-of-type
:last-of-type
3.
:checked
:focus
:disabled
:empty
:hover 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
background: yellow;
padding: 20px;
display: none;
}
/* div요소에 마우스 올리면 p 요소를 보이게 */
/* div:hover p{
display:block;
} */
</style>
</head>
<body>
<div onmouseover="div_mouseover()" onmouseout="div_mouseout()">
Hover over me
<p id="box">Lorem ipsum dolor sit amet.</p>
</div>
<script>
function div_mouseover(){
document.getElementById("box").style.display="block";
}
function div_mouseout(){
document.getElementById("box").style.display="none";
}
</script>
</body>
</html>위 코딩을 JQuery를 이용하여 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p{
background: yellow;
padding: 20px;
display: none;
}
</style>
</head>
<body>
<div>
Hover over me
<p id="box">Lorem ipsum dolor sit amet.</p>
</div>
<script>
$("div").hover(
function() {
$("#box").show();
}
, function() {
$("#box").hide();
});
</script>
</body>
</html>
2.
:first-child 자식요소 중에 가장 첫번째를 선택하는 가상클래스
:last-child
:first-of-type 마찬가지로 자식 요소중에 가장 첫번째를 선택하는 가상클래스
:fist-child와 차이점) 첫번째 자식 요소로 특정하는 순서를 카운트할 경우
특정 타입 엘리먼트에 대해서만 카운트를 한다는 점입니다.
:last-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p:first-child {
border: 1px solid red;
}
p:nth-child(2) {
border: 1px solid green;
}
p:last-child {
border: 1px solid blue;
}
</style>
</head>
<body>
<p>Lorem <i>ipsum</i> dolor <i>sit</i> amet.</p>
<p>Nihil perferendis odit provident deserunt!</p>
<p>Id ullam earum necessitatibus ipsum.</p>
</body>
</html>
body에서 div이 추가하면, border가 사라진다.
(last-child는 그대로이다. 왜냐면 body의 last-child가 여전히 p태그이기 때문이다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
p:first-child { /* div 생성하니까 사라짐 => body의 자식중에 첫째 자식은 div니까 사라지는 것*/
border: 1px solid red;
}
p:nth-child(2){ /* 둘째 자식도 div니까 적용 안됨 */
border: 1px solid green;
}
p:last-child { /* 여전히 마지막 자식이 p니까 얘는 먹음 */
border: 1px solid blue;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor.</div>
<div>Quos ea odio.</div>
<hr>
<p>Lorem <i>ipsum</i> dolor <i>sit</i> amet.</p>
<p>Nihil perferendis odit provident deserunt!</p>
<p>Id ullam earum necessitatibus ipsum.</p>
</body>
</html>
위와 같이 속성이 없어지는 상황을 막으려면 first-of-type, nth-of-type(2), last-of-type을 선언하면 된다.
p:first-of-type { /* 순서상관없이 */
background: red;
}
p:nth-of-type(2){
background: green;
}
p:last-of-type {
background: blue;
}3.
기타 의사클래스
:checked, :focus, :disabled, :empty 등
/*체크된 특수 상태를 찾아가는 checked*/
input[type=radio]:checked, input[type=checkbox]:checked {
height: 50px;
width: 50px;
}
input[type=text]:focus {
background: yellow;
}
input[type=text]:disabled {
background: #ddd;
}
:empty {
width: 100%;
height: 20px;
background: red;
}
반응형