[CSS] 3. Pseudo-classes

호버, 액티브, 포커스 정리하자

호버로 했을 때 겹치는 영역이 있으면 밑에 영역에 속하게해서 안바뀌게함

Pseudo-classes

- A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

- 클래스 이름:수도 클래스() 형식(인자가 있는 수도 클래스는 괄호가 있음)

 

너무 많아서 일단 배운 것만 했다. 나중에 다 차차 써먹으면서 채워갈 것임.

Element display state pseudo-classes

- 디스플레이 상태에 따라

1. :fullscreen : 풀 스크인 모드일 때

Input pseudo-classes

- form과 관련된, 인터렉션 전후의 필드 상태에 따라

 

Linguistic pseudo-classes

-

Location pseudo-classes

-

Resource state pseudo-classes

-

Time-dimensional pseudo-classes

-

Tree-structural pseudo-classes

- 도큐먼트 트리 안의 요소의 위치에 따라

1. :nth-of-type() : n번째 요소

:nth-of-type(<An+B> | even | odd) {
  /* ... */
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

/* Odd paragraphs */
p:nth-of-type(2n + 1) {
  color: red;
}

dd:nth-of-type(even) {
  border: 2px solid orange;
}

- :nth-last-of-type

- :first-of-type

User action pseudo-classes

-

Functional pseudo-classes

-

 

 

+ in relation to : 관련하여

 

++

[질문]

CSS 의사 클래스가 JS 이벤트 핸들러로 처리하는 것보다 성능적으로 우수한가요?ˀ

[답변]

JS 이벤트 핸들러로 처리하면 렌더링이 완료된 후에 DOM을 다시 수정해야 하기 때문에 가능하면 CSS 클래스로 처리하는 하는 것을 추천드립니다

디자인과 관련된 부분이라면 JS로 처리하는 것보다 CSS로 처리하는 것이 직관적이기도 하구요

---

[출처] https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/:hover

:hover - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/:active

:active - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/:focus

:focus - CSS: Cascading Style Sheets | MDN