1. 가상 클래스란?
-
HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는 css컬렉터
-
가상 클래스는 css의 셀렉터 이름 뒤에 ":상황"의 형식으로 명시
-
복잡한 형태의 셀렉터
- 다양한 css 조합 방식
2. 자식 셀렉터
: ">"로 구분
: ">"는 HTML의 계층 구조의 표현
: A > B 일 경우 B요소는 A의 1depth 안에 존재해야함
3. 자손 셀렉터
: 자식 셀렉터가 반드시 1depth 안에 존재해야 했다면, 자손 셀렉터는 depth를 제한하지 않음
: 명시 과정에서 중간 단계를 생략해도 됨, 몇 depth를 더 내려간던지 지정한 태그의 범위 안에 존재하기만 하면 됨
4. HTML 속성에 따른 구분
: 스타일 시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있음
5. nth-child 가상 클래스
- 여러개 요소 중 n번쨰 요소라는 의미로 : nth-child(n) 형식이 추가
- 요소를 뒤에서부터 카운트할 경우 : nth-last-child(n)을 사용
-css 우선 순위
- 구체적인 것을 기준으로 우선 순위가 정해짐
- style attribute
- id selector
- class selector
- tag selector
6. 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
link : 링크의 기본 상태
active : 어떤 요소에 대하여 마우스가 눌러진 상태
visited : 방문한 경험이 있는 링크
hover : 어떤 요소에 대하여 마우스가 올라간 상태
*/
a:link, a:visited {
color: black;
}
a:hover {
color: tomato;
}
a:active {
color: green;
}
</style>
</head>
<body>
<div>
<h1>가상 클래스</h1>
<p>특정 요소가 어떤 상황에 직면했을 경우 동작하는 css</p>
<p>
<a href="http://www.codingbox.com">웹 페이지 바로가기</a>
</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
background : yellowgreen;
}
li:hover {
background: orange;
}
li:active {
background: tomato;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.com">다음</a></li>
<li><a href="http://www.google.com">구글</a></li>
</ul>
</body>
</html>