[ 생활코딩 CSS ] 3일차 - pseudo(가상) 선택자

CSS 로고

또 선택자입니다..

오늘은 Pseudo(가상) 선택자에 대해 정리하겠습니다.

가상 선택자는 요소에서 일어날 수 있는 이벤트를 선택하는 선택자입니다. 아마 아직 일어나지 않은 이벤트를 선택하는 것이라 가상이라는 말이 붙었지 않나 합니다.

예를 들면 마우스를 올려뒀을 때, 클릭했을 때, 포커스 되었을 때 등이 이벤트가 되는 것이고, 지정한 이벤트가 발생했을 때 HTML 태그의 어떤 속성을 바꿔줄지를 CSS를 통해 지정해주는 것입니다.

제가 하도 설명하는걸 못해서 이해되셨을지 모르겠네요..... 이해 부탁드립니다 ㅠㅠ

1. pseudo 클래스의 종류

혹시나 해서 한번 더 정리하지만(사실은 제가 헷갈려서) 클래스는 특정한 하나의 요소가 아니라 모든 태그가 공통적으로 가지고 있을 수 있는 구분자?를 말합니다.

아래는 대표적인 가상 클래스들입니다. 더 많은 내용은 여기를 확인하세요!

이름	예시	설명
:focus	input:focus	포커스가 지정되었을 때
:hover	a:hover	마우스 커서가 위에 있을 때
:active	a:active	눌린 상태의(활성화) 링크 선택
:link	a:link	방문하지 않은 상태의 모든 링크 선택
:enabled	input:enabled	활성화 된 상태의 모든 <input> 요소 선택
:in-range	input:in-range	숫자 범위 선택상자?를 선택(위, 아래 화살표 있는 것)
:root	root	html 문서의 최상위 요소 선택(배경색 지정을 위해)
:empty	p:empty	자식이 없는 모든 <p> 태그 선택
:visited	a:visited	방문한 상태의 모든 링크 선택

2. 써보기!

첫번째는 link 클래스입니다. 실제 작동 예제를 HTML 에디터로 넣고 싶었는데 CSS 는 따로 삽입이 안되나보네요

<a href="http://google.com">Google 링크</a>

a:link{
	color: green;
    }

Google 링크

두번째는 hover 클래스입니다.

<ul>
	<li>Hello</li>
    <li>World</li>
</ul>

ul:hover{
	background: blue;
    }

마우스를 올리면 배경이 파란색이 되었다가 떼면 흰색으로 바뀌는 것을 확인하실 수 있습니다.

 

세번째는 focus 입니다. 링크가 누르면 취소줄이 생깁니다.

<a href="https://google.com">Google 링크</a>

a:focus{
	text-decoration: line-through;
    }

 

눌렀을 때

 

누르지 않았을 때

네번째는 enabled 입니다. 활성화 된 요소에 대해 효과 적용이 가능합니다.

<input type="text" disabled/>
<input type="text"/>

input:enabled{
	background: black;
	color: white;
}

이렇게 됩니다

다섯번째는 empty 입니다. 자식이 없는 요소만 효과를 선택적으로 줄 수 있습니다.

<table border="1px">
		<tr>
        	<td></td>
            <td>내용</td>
            <td>내용</td>
        </tr>
</table>

border 속성은 표의 테두리 선의 굵기입니다.

td:empty{
	backgound-color: blue;
}

 

여기까지 가상클래스 선택자에 대해 정리해 봤습니다.

읽어주셔서 감사합니다.