- 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용
선택자:의사클래스이름 {속성: 속성값;}선택자.클래스이름:의사클래스이름 {속성: 속성값;}선택자#아이디이름:의사클래스이름 {속성: 속성값;}
1. 동적 의사 클래스(dynamic pseudo-classes)
<head>
<meta charset="UTF-8">
<title>CSS Dynamic Selectors</title>
<style>
a:link {color: orange;}
a:visited {color: gray;}
a:hover {color: blue;}
a:active {color: red;}
div {
background-color: orange;
width: 300px;
padding: 20px;
text-align: center;
}
div:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>링크 선택자를 이용한 선택</h1>
<p><a href="#">홈으로 가기!</a></p>
<div>링크 선택자를 이용한 버튼 만들기!</div>
</body>:link
- 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태
:visited
- 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태
:hover
- 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
:active
- 사용자가 마우스로 링크를 클릭하고 있는 상태
:focus
- 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태
- 해당 요소가 클릭되거나 실행되어 있는 상태
:hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상 동작
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상 동작
=> 결론 : 위의 순서대로 정의 되어야 동작( 2, 1, 1 )
2. 상태 의사 클래스(UI element states pseudo-classes)
:checked
- input 요소 중에서 체크된(checked) 상태의 input 요소를 선택
:enabled
- input 요소 중에서 사용할 수 있는 input 요소를 선택
:disabled
- input 요소 중에서 사용할 수 없는 input 요소를 선택
3. 구조 의사 클래스(structural pseudo-classes)
:first-child
- 모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택
:nth-child
- 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소 모두 선택
:nth-last-child
- 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식 요소 모두 선택
- 2n -> 뒤에서부터 2,4,6 ..번째 요소 모두
<style>
div{ border: 3px solid #008000; }
p:nth-last-child(2n) {
color: red;
font-weight: bold;
}
</style>:first-of-type
- 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소 모두 선택
<head>
<meta charset="UTF-8">
<title>CSS Structural Selectors</title>
<style>
div.first{ border: 3px solid #008000; } 🔴
div.second{ border: 3px solid #FFD700; } 🔴
p:first-of-type {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>:first-of-type을 이용한 선택</h1>
<div class="first">
🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<div class="second">
🔴<p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
</div>
</body>:last-of-type
- 모든 자식(child) 요소 중에서 맨 마지막 등장하는 특정 타입의 요소 모두 선택
:nth-of-type
- 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소 모두 선택
:nth-last-of-type
- 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소 모두 선택
:only-child
- 자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선
:only-of-type
- 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택
:empty
- 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택
:root
- 해당 문서의 root 요소를 선택
- HTML 문서에서 root 요소는 언제나 html 요소
4. 기타 의사 클래스
:not
- 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용하여 선택
이거 무슨 말이지...?
:lang
- 특정 HTML 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용
- 예를 들면, 영어에서는 인용의 표현으로 따옴표("")를 사용하나, 프랑스어에서는 부등호(<>)를 사용. 이렇게 언어에 따라 달라지는 태그의 모양을 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 수 있게 해줌.
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀