CSS 선택자 (가상 클래스, 가상 요소)

 

가상 클래스(Pseudo-Classes) 선택자

 

1. 어떠한 행동을 했을 때 동작하는 선택자 (hover, active, focus)

2. 특정한 요소를 선택하는 선택자

 

1번

 

선택자:hover {
    속성: 값;
}

a:hover {
    color: blue;
}

HOVER - 선택자 요소에 마우스 커서가 올라고 있는 동안 선택한다

 

선택자:active {
    속성: 값;
}

a:active {
    color: blue;
}

ACTIVE - 선택자 요소에 마우스를 클릭하고 있는 동안 선택한다

 

선택자:focus {
    속성: 값;
}

input:focus {
    background-color: blue;
}

FOCUS - 선택자 요소가 포커스(활성화)되면 선택한다

 

- Focus 가능한 요소는 HTML 대화형 콘텐츠가 해당한다 (INPUT, A, BUTTON, LABEL, SELECT 등)

- 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용한 요소도 Focus를 사용이 가능하다

 

2번

 

선택자:first-child {
    속성: 값;
}

.foods span:first-child {
    color: blue;
}

FIRST CHILD - 선택자 요소가 형제 요소 중 처음이라면 선택한다

 

선택자:last-child {
    속성: 값;
}

.foods h3:last-child {
    color: blue;
}

LAST CHILD - 선택자 요소가 형제 요소 중 마지막이라면 선택한다

 

선택자:nth-child(n) {
    속성: 값
}

.foods *:nth-child(2) {
    color: blue;
}

.foods *:nth-child(2n) { /* n은 0부터 시작 - 짝수 */
    color: blue;         /* Zero-Based Numbering */
}

.foods *:nth-child(2n+1) { /* n은 0부터 시작 - 홀수 */
    color: blue;           /* Zero-Based Numbering */
}

.foods *:nth-child(n+2) { /* n은 0부터 시작 - 2번째 이후의 요소 모두 선택 */
    color: blue;         /* Zero-Based Numbering */
}

NTH CHILD - 선택자 요소가 형제 요소 중 (n)번째라면 선택한다

 

부정(Negation) 선택자

 

선택자1:not(선택자2) {
    속성: 값;
}

.foods *:not(span) {
    color: blue;
}

NOT - 선택자2가 아닌 선택자1 요소라면 선택한다

 

---

 

가상 요소 (Pseudo-Elements) 선택자

 

선택자::before {
    속성: 값;
}

.box::before {
    content: "앞!";
}

BEFORE - 선택자 요소의 내부 앞에 내용(Content)을 삽입한다

 

선택자::after {
    속성: 값;
}

.box::after {
    content: "뒤!";
}

AFTER - 선택자 요소의 내부 뒤에 내용(Content)을 삽입한다

 

※ BEFORE와 AFTER 모두 인라인(글자) 요소이며, 속성으로 content를 반드시 사용해야 한다