CSS - 가상 선택자(Pseudo Selectors)

가상 선택자(Pseudo Selectors)

CSS의 가상 선택자(Pseudo Selectors)는 문서의 일부분을 선택하는 데 사용된다.

 

가상 선택자는 주로 문서의 특정 상태를 선택하거나 문서의 구조를 기반으로 선택하는데, 가상 선택자는 일반 선택자와 다르게 실제 HTML 요소에 직접적으로 일치하지 않는 대신 요소의 특정 상태나 위치를 기반으로 적용되므로 문서의 동적 변경에 반응하거나 특정 요소를 선택할 수 있게 해 준다.

 

가상 선택자는 가상 클래스(pseudo class)와 가상 요소(pseudo element)가 존재한다.

• 가상 클래스는 요소의 특정 상태를 기반으로 요소를 선택하며
• 가상 요소는 문서의 특정 부분에 스타일을 적용하도록 설계되어 있지만 그 부분이 실제 HTML에서는 표현되지 않는다.

 

가상 클래스(pseudo class)

가상 클래스 선택자는 특수한 접두사 콜론(:)을 사용하며, 문서의 구조나 요소의 특정 상태를 기반으로 문서의 부분을 선택할 수 있다.

 

자주 사용하게 되는 가상 클래스

:hover

.text-container {
    color: #333333;
}

.text-container:hover {
    color: #999999;
}

:hover: 사용자가 요소 위에 마우스를 올렸을 때 그 요소를 선택한다.

text-container라는 클래스명을 가진 요소에 마우스가 올라간다면 해당 요소의 색상을 #999999으로 변경한다.

 

:active

.button-box {
    color: blue;
}

.button-box:active {
    color: navy;
}

:active: 사용자가 요소를 활성화하였을 때(예: 마우스를 클릭하고 있는 동안) 그 요소를 선택한다.

button-box의 클래스명을 가지고 있는 요소에 마우스 클릭을 하고 있는 동안에는 색상이 navy로 변경된다.

 

:focus

.input-box {
    border: 2px solid green;
}

.input-box:focus {
    border: 2px solid blue;
}

:focus: 사용자가 텍스트 입력 필드가 활성화 되었을 때와 같이 해당 요소가 포커스를 받은 상황서의 해당 요소를 선택한다.

input-box가 입력이 가능하게 활성화 됐을 때 border색상이 변경된다.

 

:first-child / :last-child

li {
    font-weight: normal;
}

li:first-child {
    font-weight: bold;
}

li:last-child {
    font-weight: bold;
}

:first-child / :last-child: 각각 부모 요소의 첫 번째 자식 요소와 마지막 자식 요소를 선택한다.

부모 요소에 있는 li 요소 내에서 첫 번째와 마지막 요소는 font-weight가 bold로 적용된다.

 

:nth-child(n)

li:nth-child(2) {
    color: purple;
}

li:nth-child(2n - 1) {
    color: yellow;
}

:nth-child(n): 부모 요소의 n번째 자식 요소를 선택하며 2n과 같이 여러 조건이 가능하다.

2번째 li요소는 color이 purple, 2n - 1번째(1, 3, 5, ...)요소는 color이 yellow로 적용된다.

 

:visited

a:visited {
    color: purple;
}

:visited: 사용자가 이미 방문한 하이퍼링크를 선택한다.

링크를 클릭해 방문을 했다면 해당 링크는 색상이 purple으로 적용된다

 

:checked

.checkbox:checked {
    background-color: blue;
}

:checked: 체크박스 또는 라디오 버튼 같은 폼 요소가 선택되어 있을 때 그 요소를 선택한다.

체크박스의 체크를 하게 된다면 background-color가 blue로 적용된다.

 

:disabled

.checkbox:disabled {
    background-color: gray;
}

:disabled: 체크박스 또는 라디오 버튼 같은 폼 요소가 선택을 할 수 없는 비활성화 상태일 때의 요소를 선택한다.

체크박스가 비활성화 상태라면 background-color가 gray로 적용된다.

 

:not(selector)

div:not(.special) {
    color: gray;
}

div:not(.special) {
    color: gray;
}

:not(selector): 특정 선택자를 제외한 요소를 선택한다. not()에 들어가는 selector는 요소의 클래스명이나 id 뿐만 아니라 [type='text']와 같이 해당 요소의 속성을 통한 선택도 가능하다.

 

가상요소(pseudo element)

가상 요소는 요소의 특정 부분에 스타일을 적용할 수 있으며, 실제로는 존재하지 않는 문서의 부분을 생성하여 스타일을 적용할 수 있게 해 준다. 또한 가상 요소는 가상 클래스와 다르게 :: (두 개의 콜론) 접두사를 사용하여 표현한다.

 

자주 사용하게 되는 가상 요소

::before / ::after

div::before {
  content: "이전에 추가된 텍스트. ";
}

div::after {
  content: " 이후에 추가된 텍스트.";
}

::before / ::after: 요소의 내용 전후에 콘텐츠를 삽입한다. CSS content 속성과 함께 사용하여 장식적인 요소를 추가할 때 자주 사용된다.

 

::first-letter

p::first-letter {
  font-size: 200%;
  color: red;
}

::first-letter : 요소의 첫 번째 문자를 선택한다. 이 가상 요소는 텍스트의 특정 부분에 스타일을 적용하는 데 유용하게 사용된다.

 

::selection

::selection {
  background: yellow;
  color: black;
}

::selection: 사용자가 텍스트를 드래그하여 선택했을 때 해당 부분을 선택한다. 이 가상 요소는 선택된 텍스트에 대한 스타일링을 제어하는 데 사용되며 예시의 경우 드래그된 텍스트의 배경색이 yellow, 글자 색이black로 적용된다.

 

가상 클래스와 가상 요소의 콜론 수가 다른 이유

CSS2에서는 가상 클래스와 가상 요소 모두 한 개의 콜론(:)으로 표시되었다.

p:first-child { ... }
p:before { ... }

그러나 CSS3에서는 가상 클래스와 가상 요소를 명확하게 구분하기 위해 가상 요소의 표기법을 두 개의 콜론(::)으로 변경하게 되었다.

p:first-child { ... } 
p::before { ... } 

이러한 변경사항의 이유는 가상 클래스와 가상 요소 사이의 역할 차이를 명확하게 표현하기 위한 것이다.

가상 클래스는 특정 상태의 요소를 선택하는 데 사용되며, 가상 요소는 문서의 특정 부분에 스타일을 적용하기 위해 사용된다.

 

하지만, 많은 브라우저는 가상 요소에 대해 한 개의 콜론(:) 표기법을 여전히 지원하고 있는데, 이는 하위 호환성을 유지하기 위한 것이다. 그러나 최신 CSS를 작성할 때는 두 개의 콜론(::)을 사용하여 가상 요소를 표현하는 것이 권장되며, 이렇게 하면 CSS의 의도를 더 명확하게 표현할 수 있다.