가상 클래스(psuedo-class)

kirin.log·2020년 12월 8일

가상클래스

+, > 같은 조합자 또는 id, class와 같은 단순 선택자로 선택할 수 없는 것들을 선택하게 해주는 선택자

✅ :root

가장 상위 단계의 부모 요소(html요소보다 우선순위, !important)

✅ 링크

a:link 방문 전 링크상태 (href=""가 없는 a는 적용되지 않음)
a:visited 방문 후 링크상태
a:hover 마우스 오버 했을 때 상태 (링크 외 모든 요소에 적용 가능)
a:active 마우스를 클릭 했으 때 상태 (링크 외 모든 요소에 적용 가능)

👉 style 적용 순서(유의하기❗)
link ▶ visited ▶ hover ▶ active

✅ :focus

포커스를 가진 요소에 적용하는 선택자

포커스란, 요소가 선택되거나 마우스 이벤트 상태, 또는 <input> <textarea>태그에서 입력할 준비가 될 때 커서가 깜빡거리는 것(기본값 상태) 일 때를 뜻함
👉 contenteditable tabindex 속성을 사용하면 모든 요소에 focus상태로 만들 수 있다(html5)

:focus {
    color:red;
 }
/* `<input>` `<textarea>` 요소는 커서를 이동할 때마다 배경이 빨강으로 표시  */
/* 링크는 tab으로 이동 시키면 빨강으로 표시  */

✅ E:not(s)

E는 요소명, (s)는 선택자
(s에는 다른 부정선택자 또는 가상 요소를 넣을 수 없다❗, s는 부정의 대상)

:not(p) {
    color:red;
}
/* p가 아닌 곳은 모두 빨강 */    
p:not(nav) {
    color:red;
}    
/* 클래스명 nav가 아닌 p는 모두 빨강 */

✅ :enabled :disabled

주로 <form> 요소에 적용한다
(form 요소는 기본값으로 enabled 상태이다❗)
👉 disabled 속성을 사용하면 비활성화 상태가 된다 (선택, 클릭, 입력, 포커스 비활성화)

<select>
    <option value="10" disabled> 10대 </option>
    <option value="20"> 20대 </option>
    <option value="30"> 30대 </option>
    <option value="40"> 40대 </option>
</select>

✅ :checked

요소가 checked(선택) 상태일 때 적용하는 선택자이며, 주로 <input type="radio"> <input type="checkbox"> <option> 요소에 적용.

<inpit type="radio" name="fruit"> apple
<inpit type="radio" name="fruit"> banana
<inpit type="radio" name="fruit"> grape

<style>
input[type="radio"]:checked {   /* 라디오버튼이 선택될 때는 왼쪽 여백이 25px 생긴다 */
    margin-left: 25px;
}
</style>

⏩ :selected

출력 화면에서 기본 선택된 값으로 보여짐
✔ <radio> <checkbox>의 경우, 기본 선택되어 출력
✔ <select>-<option>요소의 경우, 기본 표면값으로 지정되어 출력

✅ :hover

요소가 hover(선택) 상태일 때 적용하는 선택자이며, 마우스가 hover되었을 때 특정 명령이 실행되는 것

<inpit type="radio" name="fruit"> apple
<inpit type="radio" name="fruit"> banana
<inpit type="radio" name="fruit"> grape

<style>
input[type="radio"]:checked {   /* 라디오버튼이 선택될 때는 왼쪽 여백이 25px 생긴다 */
    margin-left: 25px;
}
</style>

⏩ A 선택자에 :hover 시, B 요소에 css적용되는 방법

특정 요소에 hover를 적용하였을 때, 다른 요소에 css효과가 나타나도록 표현할 수 있다.
👉 > + 띄어쓰기 ~ 를 활용할 수 있다.

예시 1. span태그가 container클래스 영역 안 바로 다음에 있을 때 
<div class="container">
  <span> content1 </span>
  <div> content2 </div>
</div>

<style>
   .container:hover > span {
 /* hover되지 않았을 때 opacity: 0;을 주면 안보이다가 hover될때만 보이도록 구현할 수 있다 */
 	opacity: 1;   
 	width: 300px;
 /* ">"를 사용 -> container에 hover시키면 span에 적용된 css가 실행 */
</style>

 예시 2. span태그가 container클래스 영역 안의 어딘가에 있을 때 
 <div class="container"></div>
 <span> content1 </span>

<style>
    .container:hover + span {
  	color: red;
  	width: 300px;
  /* "+"를 사용 -> container에 hover시키면 span에 적용된 css가 실행 */
</style>

 예시 3. span태그가 container클래스 영역 밖에 있을 때 
 <div class="container">
   <span> content1 </span>
   <div> content2 </div>
 </div>

<style>
    .container:hover  span {
  	color: red;
  	width: 300px;
  /* "(띄어쓰기, 공란)"를 사용 -> container에 hover시키면 span에 적용된 css가 실행 */
</style>

예시 4. span태그가 container클래스의 자손일 때
<div class="container">
   <div class="second-container">
     <span> content1 </span>
   </div>
</div>

<style>
  .container:hover ~ span {
	color: red;
	width: 300px;
/* "~"를 사용 -> container에 hover시키면 span에 적용된 css가 실행 */
</style>

✅ :nth-child()

부모의 n번째 위치에 있는 자식을 선택
👉 n값에 적용할 수 있는 3가지
1️⃣ even 짝수값 / odd 홀수값

li:nth-child(even) {
  	color:red;
  }
/* 목록(li)중 2,4,6 등의 짝수 값이 빨강 */

2️⃣ 정수(양수/음수), 0 가능

li:nth-child(3) {
  	color:red;
  }
/* 목록(li)중 3번째 값만 빨강 */

3️⃣ 공식 (ex. an+b)
👉 a와 b는 정수값(양수,음수,0)
👉 a는 선택할 숫자 간격
👉 b는 선택할 시작 숫자 값
👉 n은 카운트(첫번째는 0부터 시작)
an+b = (a X n)+b

:nth-child(2n+2)
  (2 X 0) + 2 = 0  /* 선택할 요소 없음 */
  (2 X 1) + 2 = 2
  (2 X 2) + 2 = 4
  (2 X 3) + 2 = 6
/* 결과적으로 2,4,6 등 짝수 요소들이 선택 */
/* :nth-child(even) 또는 :nth-child(2n) 과 같다 */
 
---음수값 적용 예시---
:nth-child(2n-1)
  (2 X 0) - 2 = -2
  (2 X 1) - 2 = 0  /* 선택할 요소 없음 */
  (2 X 2) - 2 = 2
  (2 X 3) - 2 = 4
/* 결과적으로 -2,0,2,4 번째 요소들이 선택 */ >

:nth-child(-n+3)
  (-0) + 3 = 3
  (-1) + 3 = 2
  (-2) + 3 = 1
  (-3) + 3 = 0  /* 선택할 요소 없음 */
/* 결과적으로 3,2,1,0 번째 요소들이 선택 */

✅ :nth-of-type()

같은 유형의 n번째 형제를 선택
👉 n값에 적용할 수 있는 3가지
1️⃣ even 짝수값 / odd 홀수값

E:nth-of-type(even) {
  	color:red;
  }
/* E 요소 중 같은 유형의 2,4,6 등의 짝수 값이 빨강 */

2️⃣ 정수(양수/음수), 0 가능

E:nth-of-type(3) {
  	color:red;
  }
/* E 요소 중 같은 유형의 3번째 값만 빨강 */

E:nth-of-type(2n+2)
  (2 X 0) + 2 = 0  /* 선택할 요소 없음 */
  (2 X 1) + 2 = 2
  (2 X 2) + 2 = 4
  (2 X 3) + 2 = 6
/* E요소 중 같은 유형의 2,4,6 등 짝수 요소들이 선택 */
 
---음수값 적용 예시---
E:nth-of-type(2n-1)
  (2 X 0) - 2 = -2
  (2 X 1) - 2 = 0  /* 선택할 요소 없음 */
  (2 X 2) - 2 = 2
  (2 X 3) - 2 = 4
/* E요소 중 같은 유형의 -2,0,2,4 번째 요소들이 선택 */ >

E:nth-of-type(-n+3)
  (-0) + 3 = 3
  (-1) + 3 = 2
  (-2) + 3 = 1
  (-3) + 3 = 0  /* 선택할 요소 없음 */
/* E요소 중 같은 유형의 3,2,1,0 번째 요소들이 선택 */