pseudo-class가 무엇인가?
pseudo class는 선택하고자 하는 HTML 요소의 특별한 상태(state)를 정의하는 데 사용된다.
예를 들어, 다음과 같은 용도로 사용할 수 있다:
- 사용자가 요소 위에 마우스를 올릴 때 요소 스타일 지정
- 방문한 링크와 방문하지 않은 링크 스타일이 다릅니다
- 요소가 포커스를 맞출 때 스타일 지정
구문
| selector:pseudo-class { property: value; } |
클래스나 아이디에도 pseudo class를 사용할 수 있다.
| selector.class-name:psudo-class { property: value; } or selector.id-name:psudo-class { property: value; } |
Pseudo Class
대표적인 CSS pseudo class
CSS에서 자주 사용되는 대표적인 pseudo class는 다음과 같다.
| dynamic pseudo class | 설명 |
| :link | 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태) |
| :visited | 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함. |
| :hover | 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함. |
| :active | 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함. |
| :focus | 초점이 맞춰진 input 요소를 모두 선택함. |
| UI element state pseudo-class | 설명 |
| :checked | 체크된(checked) 상태의 input 요소를 모두 선택함. |
| :enabled | 사용할 수 있는 input 요소를 모두 선택함. |
| :disabled | 사용할 수 없는 input 요소를 모두 선택함. |
| structural pseudo class | 설명 |
| :first-child | 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함. |
| :nth-child | 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함. |
| :first-of-type | 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함. |
| :nth-of-type | 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함. |
.
기타 pseudo class로 :not, :lang 등이 있다.
더 자세한 pseud class는 본문 아래에 정리하였다.
아래는 pseudo class 링크 관련 예제이다.
링크는 다양한 방법으로 표시될 수 있습니다:
| <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } </style> </head> <body> <h2>상태에 따라 링크 스타일링</h2> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>참고: </b> a:hover는 CSS 정의에서 a:link와 a:visit 후에 와야 합니다.</p> <p><b>참고: </b> a: 활성화는 CSS 정의에서 a:hover 다음에 와야 합니다.</p> </body> </html> |
링크의 상태에 따라 색상이 변경되는 것을 확인할 수 있으며 아래 그림과 같다.
참고: a:hover는 CSS 정의에서 a:link와 a:visited 뒤에 와야 효과적이다!
a:active는 CSS 정의에서 a:hover 뒤에 와야 효과적이다!
의사 클래스 이름은 대소문자를 구분하지 않는다.
pseudo class와 HTML class
pseudo class는 HTML 클래스와 결합할 수 있다:
예제에서 링크를 마우스로 가리키면 링크의 색이 바뀐다:
| <!DOCTYPE html> <html> <head> <style> a.highlight:hover { color: #ff0000; font-size: 22px; } </style> </head> <body> <h2>Pseudo-classes and HTML Classes</h2> <p>아래 첫 번째 링크 위에 마우스를 놓으면 색상과 글꼴 크기가 변경됩니다:</p> <p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p> <p><a href="default.asp">CSS Tutorial</a></p> </body> </html> |
a요소에 highlight클래스의 hover 상태인 경우에 색상은 ff0000, font-size는 22px로 설정하여 마우스를 'CSS Syntxt' 위에 올려두면 a.highlight:hover 클래스의 스타일이 설정되어 색상은 빨강색에 글자크기는 22px로 크게 보여주며 아래 그림과 같다.
Hover on <div>
<div> 요소에서 :hover 의사 클래스를 사용하는 예:
| <!DOCTYPE html> <html> <head> <style> div { background-color: green; color: white; padding: 25px; text-align: center; } div:hover { background-color: blue; } </style> </head> <body> <p>배경색을 변경하려면 아래의 div 요소 위에 마우스를 놓습니다:</p> <div>Mouse를 올려보세요</div> </body> </html> |
div:hover 스타일에 배경색을 파랑색으로 설정하였다. div 영역에 마우스를 올리면 div영역이 초록색에서 파랑색으로 변하는 것을 확인할 수 있으며 아래 그림과 같다.
단순한 툴팁 호버
<div> 요소 위에 마우스를 올려 놓으면 <p> 요소(도구 팁과 같은)가 표시된다:
<p> 요소를 표시하려면 내 위로 마우스를 이동합니다.
| <!DOCTYPE html> <html> <head> <style> p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } </style> </head> <body> <div>이 div 요소 위에 마우스를 올려 놓으면 p 요소가 표시됩니다 <p>타다! 여기 있어요!</p> </div> </body> </html> |
div 요소 위에 마우스를 올려놓으면 노랑색 배경으로 p 요소가 나타난다.
CSS - :first-child pseudo clases
:first-child pseudo class는 다른 요소의 첫 번째 자식인 지정된 요소와 일치한다.
첫번째 <p>요소와 일치
다음 예제에서 선택기는 요소의 첫 번째 자식인 <p> 요소와 일치한다:
| <!DOCTYPE html> <html> <head> <style> p:first-child { color: blue; } </style> </head> <body> <p>안녕하세요 텍스트에요1.</p> <p>안녕하세요 텍스트에요2.</p> <div> <p>안녕하세요 텍스트에요3.</p> <p>안녕하세요 텍스트에요4.</p> </div> </body> </html> |
p:first-child는 첫번째 p요소 스타일로 글자색을 파랑으로 설정하였고, 아래 그림과 같다.
''안녕하세요 텍스트에요1. '이 처음 p요소이어서 글자색이 파랑으로 지정되었고, <div>요소내에 처음 p요소가 '안녕하세요 텍스트에요3.'이어서 파랑색으로 지정되었다.
모든 <p>요소 내의 첫번째 <i>요소와 일치
다음 예제에서 선택자는 모든 <p> 요소의 첫 번째 <i> 요소와 일치한다:
| <!DOCTYPE html> <html> <head> <style> p i:first-child { color: blue; } </style> </head> <body> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> </body> </html> |
p i:first-child 스타일은 글자색을 파랑색으로 지정하였다. p요소내에 첫번째로 만나는 i요소는 글자색을 파랑색으로 지정하였고 아래 그림과 같다.
모든 첫번째 자식 <p>요소 내에 모든 <i>요소와 일치
다음 예제에서 선택자는 다른 요소의 첫 번째 자식인 <p> 요소의 모든 <i> 요소와 일치한다:
| <!DOCTYPE html> <html> <head> <style> p:first-child i { color: blue; } </style> </head> <body> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> <div> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> <p>나는 <i>강한</i> 사람입니다. 나는 <i>강한</i> 사람입니다.</p> </div> </body> </html> |
p:first-child i 로 설정한 경우, 첫번째 자식인 <p>요소의 모든 <i>요소에 글자색을 파랑으로 지정한다.
두번째 파랑색인 '강한'은 <div>요소 내에 첫번째 <p>요소의 <i>요소에 파랑색으로 글자색을 지정하였다. 위의 코드를 실행하면 아래 그림과 같다.
CSS - :lang Pseudo class
:lang pseudo class를 사용하면 여러 언어에 대한 특수 규칙을 정의할 수 있다.
아래 예제에서 :lang은 lang="no"인 <q> 요소에 대한 따옴표를 정의한다:
| <!DOCTYPE html> <html> <head> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>안녕 <q lang="no">단락 내에 따옴표</q> 안녕.</p> <p>이 예에서는 :lang이 q 요소에 대한 따옴표를 lang="no"로 정의합니다:</p> </body> </html> |
q요소에 앞뒤로 따옴표로 '~'로 정의하였고, <q>요소 단락 앞뒤로 "~"가 표시되는 예제로 아래 그림과 같이 표시된다.
CSS pseudo class
| 선택자 | 예제 | 설명 |
| :active | a:active | 활성 링크를 선택합니다 |
| :checked | input:checked | 확인된 모든 <input> 요소를 선택합니다 |
| :disabled | input:disabled | 비활성화된 모든 <input> 요소를 선택합니다 |
| :empty | p:empty | 자식이 없는 모든 <p> 요소를 선택합니다 |
| :enabled | input:enabled | 활성화된 모든 <input> 요소를 선택합니다 |
| :first-child | p:first-child | 부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다 |
| :first-of-type | p:first-of-type | 부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택합니다 |
| :focus | input:focus | 포커스가 있는 <input> 요소를 선택합니다 |
| :hover | a:hover | 마우스 위에서 링크를 선택합니다 |
| :in-range | input:in-range | 지정된 범위 내의 값을 가진 <input> 요소를 선택합니다 |
| :invalid | input:invalid | 잘못된 값을 가진 모든 <input> 요소를 선택합니다 |
| :lang | p:lang(it) | lang 속성 값이 "it"로 시작하는 모든 <p> 요소를 선택합니다 |
| :last-child | p:last-child | 부모의 마지막 자식인 모든 <p> 요소를 선택합니다 |
| :last-of-type | p:last-of-type | 부모의 마지막 <p> 요소인 모든 <p> 요소를 선택합니다 |
| :link | a:link | 방문하지 않은 모든 링크를 선택합니다 |
| :not | :not(p) | <p> 요소가 아닌 모든 요소를 선택합니다 |
| :nth-child | p:nth-child(2) | 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다 |
| :nth-last-child | p:nth-last-child(2) | 마지막 자식에서 카운트하는 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다 |
| nth-last-of-type | p:nth-last-of-type(2) | 마지막 자식에서 카운트하는 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다 |
| nth-of-type | p:nth-of-type(2) | 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다 |
| only-of-type | p:only-of-type | 부모의 유일한 <p> 요소인 모든 <p> 요소를 선택합니다 |
| :only-child | p:only-child | 부모의 유일한 자식인 모든 <p> 요소를 선택합니다 |
| :optional | input:optional | "필요한 입력" 특성을 가진 <input> 요소를 선택합니다. |
| :out-of-range | input:out-of-range | 지정된 범위 밖의 값을 가진 <input> 요소를 선택합니다 |
| :read-only | input:read-only | "읽기 전용" 특성이 지정된 <input> 요소를 선택합니다 |
| :read-write | input:read-write | "읽기 전용" 특성이 없는 <input> 요소를 선택합니다 |
| :required | input:required | "필수" 특성이 지정된 <input> 요소를 선택합니다 |
| :root | root | 문서의 루트 요소를 선택합니다 |
| :target | #news:target | 현재 활성 #뉴스 요소를 선택합니다(해당 앵커 이름이 포함된 URL에서 클릭) |
| :valid | input:valid | 유효한 값을 가진 모든 <입력> 요소를 선택합니다 |
| :visited | a:visited | 모든 링크를 선택합니다. |
모든 pseudo class 요소
| 선택자 | 예제 | 예제 설명 |
| ::after | p::after | 모든 <p> 요소 뒤에 내용 삽입 |
| ::before | p::before | 모든 <p> 요소 앞에 내용 삽입 |
| ::first-letter | p::first-letter | 모든 <p> 요소의 첫 글자를 선택합니다 |
| ::first-line | p::first-line | 모든 요소의 첫 선을 선택합니다. |
| ::marker | ::marker | 목록 항목의 마커를 선택합니다 |
| ::selection | p::selection | 사용자가 선택한 요소의 부분을 선택합니다 |
지금까지 CSS pseudo class에 대해서 간략히 살펴보았다.
꼭 손으로, 눈으로, 머리로 실습하여 익히기 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS opacity/transparency (0) | 2023.08.31 |
|---|---|
| CSS pseudo-elements (1) | 2023.08.30 |
| CSS combination (0) | 2023.08.28 |
| CSS 수평, 수직 정렬 (0) | 2023.08.27 |
| CSS float 예제 (0) | 2023.08.25 |
댓글