📘 가상 클래스 선택자(Pseudo class selector)
- 콜론 1개 사용
- 실재로 html에 존재하지 않는 클래스지만, 마치 클래스가 존재하는것 처럼 작동한다고 하여 가상 클래스 선택자로 부른다.
| 가상 클래스 선택자 | 설명 |
| :nth-child(n) | • 해당 클래스명의 n번째 자식인 엘리먼트를 선택 |
| :nth-child(odd) | • 해당 클래스명의 홀수 번째 자식인 엘리먼트를 선택 |
| :nth-child(even) | • 해당 클래스명의 짝수 번째 자식인 엘리먼트를 선택 |
| :nth-child(3n) | • 해당 클래스명의 3번째 자식마다 엘리먼트를 선택 |
| :nth-child(3n+1) | • 해당 클래스명의 3n+1번째 자식인 엘리먼트를 선택 |
| a:visited | • 방문한 적이 있는 링크를 선택 |
<style>
/* box라는 클래스는 있지만, box:nth-child는 없잖아 */
/* CSS에서 가상으로 클래스를 붙여서 원하는 대로 작동 시킨다. */
/* 그것이 가상 클래스 선택자 이니깐. */
.box:nth-child(1){
color: yellowgreen;
}
</style>
<div class='box'>hello world</div>
📘 사용자와 상호작용을 위한 '가상 클래스'
- 콜론 1개 사용
- 클래스가 없는데, 있는 것처럼 처리함
| 가상 클래스 종류 | 설명 |
| :hover | • 마우스를 요소 위에 올렸을 때 적용 됨 |
| :active | • 버튼이나 링크를 클릭하는 등의 요소를 실행할 때 적용 됨 |
| :focus | • input 박스 클릭하는 등, 클릭할 수 있는 요소에 포커스를 줄 때 적용 됨 |
| :checked | • 선택한 상태의 라디오, 체크박스, 옵션 요소를 나타냅니다. |
<style>
input:checked+label{
background-color: #c2edff;
color: tomato;
}
</style>
<input id="check-box" type="checkbox">
<label for="check-box">오늘 타코야끼 집 문 닫음. 그래서 못 먹음🥲</label>
📘 '가상 요소 선택자'
- 콜론 2개 사용(간혹 콜론이 1개만 보이는 경우가 있는데, 레거시 브라우저 호환을 위한 선택이다. IE8 이하 버전)
- 마크업에 없는 요소를 삽입시켜, 있는 것 처럼 처리한다.
- 브라우저, OS 스크린리더에 따라 가상요소 선택자를 읽을 수도, 읽지 않을 수도 있다.
- 요소의 콘텐츠가 정보로써의 목적이 없을 때 사용한다.
- 가상 요소 선택자로 생성한 콘텐츠는 DOM이 포함하지 않는다. 접근성 트리에도 들어가지 않음
| 가상 요소 선택자 | 설명 |
| ::before | • 따옴표만 적더라도 content 속성을 함께 사용해야 한다. • 요소의 맨 첫번째 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성 |
| ::after | • 따옴표만 적더라도 content 속성을 함께 사용해야 한다. • 요소의 맨 마지막 자식으로 HTML코드에 존재하지 않는 가상요소를 하나 생성 |
| ::selection | • 마우스 드래그 시, 내가 설정한 스타일로 하이라이트 된다. (컬러 관련 속성만 되는 듯 함) |
📚 Reference
반응형
'✏️ 공부 > HTML • CSS' 카테고리의 다른 글
| [CSS] @font-face와 google fonts 사용 방법 (0) | 2022.07.25 |
|---|---|
| [HTML] ul, ol, dl 언제 쓰는 거임? (0) | 2022.05.24 |