- 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 지정해서 스타일을 지정하는 것 (싱글콜론(:) 사용)
- 가상클래스는 어떤 상태를 의미하는 것일뿐 HTML 문서 상에 있는 것이 아니다. 주의하자
- 가상 클래스를 효과적으로 사용하면 불필요한 HTML, CSS, JavaScript의 코드를 효과적으로 줄일 수 있다
- 가상 클래스는
특별한 상태
를 기술, 가상 요소는특정 부분을 스타일링
😄 code 1. 가상 클래스
/* HTML */
<div class="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<a href="https://www.naver.com/">네이버</a>
<input type="text" />
/* CSS */
.parent:hover {
color: red;
}
.parent p:first-child {
color: blue;
}
.parent p:nth-child(2) {
color: orange;
}
.parent p:last-child {
color: aqua;
}
.parent p:not(:first-child) {
color: blue;
}
a:link {
color: red;
}
a:visited {
color: aqua;
}
input:focus {
background-color: green;
}
p:active {
color: orange;
}
:hover -> 요소에 커서 올렸을 때 스타일 지정
:first-child -> 부모의 자식 요소중에서 첫번째 요소에 스타일 지정
:nth-child(2) -> 부모의 자식 요소중에서 두번째 요소에 스타일 지정
:last-child -> 부모의 자식 요소중에서 마지막 요소에 스타일 지정
:not(:first-child) -> 부모의 자식 요소중에서 첫번째 자식 요소 제외한 나머지 자식 요소에 스타일 지정
:link -> 미방문한 링크에 스타일 지정
:visited -> 방문한 링크에 스타일 지정
:focus -> focus가 있을 때 스타일 지정
:active -> 요소를 클릭하는 순간만 스타일 지정
:checked -> 사용자가 체크박스에서 체크했을 때 스타일 지정
:disabled -> 요소가 비활성 상태일 때 스타일 지정
:enabled -> 요소가 활성화 상태일 때 스타일 지정
코드를 설명하기 위해 편의상 한꺼번에 작성했을 뿐 실제로 가상 클래스는 순서가 존재합니다. 따라서 위의 코드처럼 여러개의 가상클래스를 동시에 사용하면 가상 클래스 순서에 따라 원하지 않는 결과가 나올 수도 있으니 주의해서 사용하시길 바랍니다.
- 존재하지 않는 요소를 가상으로 생성해준다 (더블콜론(::) 사용)
- 가상 요소는 block 요소에만 사용 할 수 있다
- 가상 클래스는
특별한 상태
를 기술, 가상 요소는특정 부분을 스타일링
가상 요소는 아래의 5가지가 있다
::before -> block 요소 앞에 내용 삽입 (content 값 필수)
::after -> block 요소 뒤에 내용 삽입 (content 값 필수)
::first-letter -> block의 첫번째 문자 선택
::first-line -> block의 첫 줄 선택
::selection -> 사용자가 드래그로 선택한 block 전체 or 일부 선택
😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍