✦ 가상 클래스 선택자(Pseudo-Class Selector)란?
특정 상태에 있는 요소를 선택하기 위한 방법
- 기존의
Selector에콜론(:)을 붙여서 사용한다. 콜론(:)을 이용하여 요소의 상태를 작성해 선택 범위를 좁힐 수 있는 선택자이다.
🔥 가상 클래스 선택자에 대한 Q&A
𝗤. 가상이라는 단어부터 모르겠어요...
𝐀. 우선 가상 클래스 선택자는 의사 클래스 선택자라고 불립니다.
여기에서 의사(pseudo)란 "실제로는 존재하지 않지만 마치 그렇게 보이는"이라는 의미를 가지고 있습니다.
즉, 가상 클래스 선택자는 실제 HTML 태그나 요소가 아니라, 요소의 특정 상태를 나타내기 때문에 '가상 클래스 선택자' 혹은 '의사 클래스 선택자'라고도 부릅니다.
𝗤. 오. 그러면 "실제 HTML 태그나 요소가 아니라, 요소의 특정 상태"에는 무엇이 해당되나요?
𝐀. 요소의 특정 상태는
링크 상태,사용자 동작,요소의 위치나 상태,언어,부정 선택자총 5개로 구분할 수 있습니다.
1.링크 상태- 링크의 다양한 상태를 선택할 수 있습니다.
2.사용자 동작- 사용자의 동작에 반응하는 요소를 선택할 수 있습니다.
3.요소의 위치나 상태- 요소의 위치나 상태를 기반으로 요소를 선택할 수 있습니다.
4.언어- 특정 언어의 내용을 선택할 수 있습니다
5.부정 선택자- 특정 조건을 만족하지 않는 요소를 선택할 수 있습니다
𝗤. 마지막으로 사용 방법에 대해 알려주세요!
💡 가상 클래스 선택자의 사용 방법
1. 링크 상태
상태 | 설명 |
|---|---|
:link | 사용자가 방문한적 없는 링크를 선택 |
:visited | 사용자가 이미 방문한 링크를 선택 |
:hover | 사용자가 마우스를 해당 요소 위에 놓았을 때를 선택 |
:active | 사용자가 현재 활성화하고 있는 요소(예: 클릭 중인 버튼)를 선택 |
< 실행 코드 >
<a href="https://www.example.com">이 링크는 tomato 색상으로 표시됩니다.</a>
<br>
<a href="https://www.example.com" style="color:yellow;">이 링크는 방문한 후 yellow 색상으로 표시됩니다.</a>
<br>
<input type="button" value="버튼 위에 마우스를 올리면 배경색이 blue, 글자색이 red가 됩니다.">a:link {
color: tomato;
}
a:visited {
color: yellow
}
input[type=button]:hover {
background-color: blue;
color: red;
}
input[type=button]:active {
background-color: blue;
color: red;
}< 실행 결과 >
2. 사용자 동작
상태 | 설명 |
|---|---|
:focus | 현재 키보드의 포커스를 받은 요소를 선택 |
:enabled | 폼 컨트롤 요소가 활성화된 상태인 요소를 선택 |
:disabled | 폼 컨트롤 요소가 비활성화된 상태인 요소를 선택 |
:checked | 체크된 form 요소를 선택 |
< 실행 코드 >
<p>텍스트 필드를 클릭하면 배경색이 yellow, 글자색이 red가 됩니다:</p>
<input type="text" value="텍스트 필드입니다.">
<br>
<p>활성화된 버튼의 배경색은 white입니다:</p>
<input type="button" value="활성화된 버튼입니다.">
<br>
<p>비활성화된 버튼의 배경색은 lightgray입니다:</p>
<input type="button" value="비활성화된 버튼입니다." disabled>
<br>
<p>체크박스를 체크하면 배경색이 blue가 됩니다:</p>
<input type="checkbox">input[type=text]:focus{
background-color: yellow;
color: red;
}
input:enabled {
background-color: white;
}
input:disabled {
background-color: lightgray;
}
input[type="checkbox"]:checked {
background-color: blue;
}< 실행 결과 >
3. 요소의 위치나 상태
상태 | 설명 |
|---|---|
:first-child | 형제 요소 중 첫 번째 요소를 선택 |
:last-child | 형제 요소 중 마지막 요소를 선택 |
:nth-child(n) | 형제 요소 중 n 번째 요소를 선택 |
:nth-last-child(n) | 형제 요소 중 뒤에서 n 번째 요소를 선택 |
:first-of-type | 동일한 유형(type)의 형제 요소 중 첫 번째 요소를 선택 |
:last-of-type | 동일한 유형(type)의 형제 요소 중 마지막 요소를 선택 |
:nth-of-type(n) | 동일한 유형(type)의 형제 요소 중 n 번째 요소를 선택 |
:nth-last-of-type(n) | 동일한 유형(type)의 형제 요소 중 뒤에서 n 번째 요소를 선택 |
< 실행 코드 >
<p>:first-child, :first-of-type 선택자에 의해 색상이 변경된 첫 번째 문단입니다.</p>
<p>:nth-child(2), :nth-of-type(2), :nth-last-child(2), :nth-last-of-type(2) 선택자에 의해 색상이 변경된 두 번째 문단입니다.</p>
<p>세 번째 문단입니다.</p>
<p>:last-child, :last-of-type 선택자에 의해 색상이 변경된 네 번째 문단입니다.</p>p:first-child {
color: blue;
}
p:last-child {
color: red;
}
p:nth-child(2) {
color: green;
}
p:nth-last-child(2) {
color: purple;
}
p:first-of-type {
color: orange;
}
p:last-of-type {
color: brown;
}
p:nth-of-type(2) {
color: pink;
}
p:nth-last-of-type(2) {
color: gray;
}< 실행 결과 >
Cascading 형식으로 작동하기 때문에 하나하나 주석처리하고 확인해보면 좋다!
4. 언어
상태 | 설명 |
|---|---|
:lang | 지정한 언어의 내용을 선택 |
< 실행 코드 >
<p lang="ko">안녕하세요.</p>
<p lang="en">English.</p>p:lang(ko) {
color: blue;
}< 실행 결과 >
5. 부정 선택자
상태 | 설명 |
|---|---|
:not() | 지정한 클래스를 가지지 않은 모든 요소를 선택 |
<p class="ko">이 문장은 클래스가 'ko'인 문단입니다. (파란색이 아님)</p>
<p>이 문장은 클래스가 지정되지 않은 문단입니다. (파란색)</p>p:not(.ko) {
color: blue;
}
✦ 가상요소 선택자
실제로 존재하지 않은 요소나 범위를 만드는 선택자이다.
- 기존의
Selector에콜론 두 개(::)를 붙여서 사용한다. 콜론 두 개(::)을 이용하여 가상 요소를 생성 또는 선택할 수 있는 속성을 작성할 수 있다.
🔥 가상 요소 선택자에 대한 Q&A
𝗤. 가상 클래스 선택자와 뭐가 다른건가요?
𝐀. 가상 클래스 선택자는 클래스의 상태에 따라서 선택한다면, 가상 요소 선택자는 실제로 존재하지 않은 요소나 범위를 속성을 통해 직접 만들어서 스타일을 적용할 수 있는 선택자입니다.
𝗤. 그럼 어떻게 사용하는 건가요?!
💡 가상 클래스 선택자의 사용 방법
1. before
선택된 요소의 이전에 가상의 요소를 생성해준다.
- 생성된 가상 요소에 대한 스타일을 지정할 수 있다.
- 가상 요소는 말그대로 가상의 요소가 생성되기 때문에
content속성을 필수로 작성해줘야 한다. - 주로 요소 앞에 아이콘, 텍스트 등을 삽입할 때 사용한다.
선택자::before {
content: 'hello';
color: red;
}🔥 추가적으로
Before요소를 사용하면, 해당 가상 요소의 첫 번째 글자에 적용된다.
그 이유는 가상 요소이더라도 해당 선택자에서는 가장 맨 처음 오는 글자이기 때문이다.
뒤의first-letter와 비슷한 느낌!
2. after
before와 마찬가지로 선택된 요소의 이후에 가상의 요소를 생성해준다.
- 생성된 가상 요소에 대한 스타일을 지정할 수 있다.
- 가상 요소는 말그대로 가상의 요소가 생성되기 때문에
content속성을 필수로 작성해줘야 한다.
선택자::after {
content: 'hello';
color: red;
}3. first-letter
텍스트 콘텐츠의 첫 번째 글자에만 스타일을 적용하고자 할 때 사용한다.
- 주로 드롭 캡스타일 등의 텍스트 효과를 적용할 때 사용한다.
선택자::first-letter {
color: red;
font-size: 30px;
}4. first-line
첫 번째 줄에 오는 텍스트 콘텐츠에 스타일을 적용하고자 할 때 사용한다.
⭐️ 이 선택자는 Viewport 기준으로 텍스트의 개행이 달라지기 때문에 이를 반영하여 사용해야 한다.
p::first-line {
color: blue;
font-weight: bold;
}5. selection
사용자가 텍스트를 드래그하여 선택한 부분에 스타일을 적용한다.
p::selection {
background-color: yellow;
color: black;
}
6. placeholder
입력 필드의 플레이스홀더 텍스트에 스타일을 적용한다.
input::placeholder {
color: gray;
font-style: italic;
}
