[CSS] 가상 클래스 선택자

hover

a:hover {
  color: pink;
}

[ABC: hover] 

선택자 ABC 의 요소에 마우스 커서가 올라가 있는 동안을 선택한다.

active

a:active {
  color: pink;
}

[ABC: active]
선택자 ABC 의 요소에 마우스를 클릭하고 있는 동안을 선택한다.

focus

input:focus {
  color: pink;
}

[ABC: focus]
선택자 ABC 요소가 포커스되면 선택한다.

- 포커스가 가능한 요소들 : input, select, textarea 등

 

- 포커스가 가능하지 않은 요소들을 포커스가 가능한 형태로 만드는 방법

<div class="box" tabindex="-1"></div>

tabindex 속성을 통해 Focus 가 될 수 있는 요소를 만들 수 있다.
Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성이다.
순서로 (값으로) -1 이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장되지 않는다.
(포커스는 한 페이지에서 하나의 요소만 가능하다.)

first child

<div class="animals">
  <span>고양이</span>
  <span>강아지</span>
  <div>토끼</div>
  <p>곰</p>
  <h3>팬더</h3>
</div>

.animals span:first-child {
  color: pink;
}
/* 고양이 */

[ABC:first-child]
선택자 ABC 가 형제 요소 중에서 첫번째라면 선택한다.

last child

<div class="animals">
  <span>고양이</span>
  <span>강아지</span>
  <div>토끼</div>
  <p>곰</p>
  <h3>팬더</h3>
</div>

.animals h3:last-child {
  color: pink;
}
/* 팬더 */

[ABC:last-child]
선택자 ABC 가 형제 요소 중에서 마지막 번째라면 선택한다.

nth child

<div class="animals">
  <span>고양이</span>
  <span>강아지</span>
  <div>토끼</div>
  <p>곰</p>
  <h3>팬더</h3>
</div>

.animals *:nth-child(2) {
  color: pink;
}
/* 강아지 */

.animals *:nth-child(2n) {
  color: pink;
}
/*
n 은 0부터 시작한다. (Zero-Based Numbering)
0, 2, 4, 6 ... 번째 형제 요소를 찾는다. (짝수 번째)
0번째 요소라는 것은 없으므로 2, 4번째 요소인 강아지, 곰이 선택된다.
*/

.animals *:nth-child(2n + 1) {
  color: pink;
}
/* 1, 3, 5, 7 ... 번째 형제 요소를 찾는다. (홀수 번째) */

.animals *:nth-child(n + 2) {
  color: pink;
}
/* 2, 3, 4, 5 ... 번째 형제 요소를 찾는다. (2번째 이후 요소) */

.animals *:nth-child(-n + 2) {
  color: pink;
}
/* 2, 1 번째 형제 요소를 찾는다. (2번째 이전 요소) */

[ABC:nth-child(n)]
선택자 ABC가 형제 요소 중 (n)번째라면 선택한다.
n 이라는 키워드를 이용해서 더욱 다양하게 요소를 선택할 수 있다.

not

<div class="animals">
  <span>고양이</span>
  <span>강아지</span>
  <div>토끼</div>
  <p>곰</p>
  <h3>팬더</h3>
</div>

.animals *:not(span) {
  color: pink;
}
/* 토끼, 곰, 팬더 */

[ABC:not(XYZ)]
부정 선택자 (Negation)
선택자 XYZ 가 아닌 ABC 요소를 선택한다.