다연이네

[days03] :의사 클래스 - 특수 상태를 정의하는 클래스 본문

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;
}

 

 

 

반응형
저작자표시 비영리

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

[days03] 메뉴바 여닫기  (0) 2020.12.07
[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터  (0) 2020.12.07
[days03] CSS 결합자(선택자 간의 관계)  (0) 2020.12.07
[days03] 수평, 수직 정렬  (0) 2020.12.07
[days03] 팝업폼(Popup Form)과 반응형 폼(Responsive Form)  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments