이번에는 CSS의 슈도클래스에 대해서 알아보도록 하겠습니다.  

슈도클래스는 특정 셀렉터에 특별한 효과를 부여하기 위해서 사용됩니다. Javascript 나 어떠한 다른 script 를 사용할 필요가 없습니다.

슈도클래스를 사용하는 기본적인 문법은 다음과 같습니다. 

CSS 클래스를 사용할 수도 있습니다. 

selector.class:pseudo-class {property: value}

다음은 가장 많이 사용되는 슈도 클래스들 목록 및 설명입니다.

<style>...</style> 블락 내에 슈도 클래스를 이용하게 될 때에는 다음과 같은 사항을 주의해야합니다. 

• a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

• a:active MUST come after a:hover in the CSS definition in order to be effective.

• Pseudo-class names are not case-sensitive.

• Pseudo-class are different from CSS classes but they can be combined.

The :link pseudo-class

다음은 단순히 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>

The :visited pseudo-class

다음은 한번 이상 방문한 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

The :hover pseudo-class

다음은 마우스 커서가 링크 위에 올라갔을 때 색깔을 변경하도록 하는 예제입니다.

<style type="text/css">
a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>

The :active pseudo-class

 :active 슈도 클래스는 활성화된 요소에 대한 속성을 지정합니다.  

다음은 활성화된 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>

The :focus pseudo-class

이 클래스는 포커스를 받은 요소에 대한 속성의 속성값을 지정할 때 사용합니다. 

다음은 포커스된 링크의 색상을 변경하는 예제입니다. 

<style type="text/css">
a:focus {color: #0000FF}
</style>
<a href="/html/index.htm">Click this Link</a>

The :first-child pseudo-class

 :first-child 슈도 클래스는 이름만 봐도 첫번째 자식에 대한 속성을 설정하는거라고 보이네요.

이 슈도클래스를 사용하시려면 IE 에서는 문서 가장 윗부분에 <!DOCTYPE> 를 넣어주셔야 합니다.

그럼 예제를 한번 보시죠. 모든 div태그의 첫번째 문단을 인덴트하여 화면에 뿌려주는 예제입니다. 

<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>

<div>
<p>
First paragraph in div. This paragraph will be indented
</p>
<p>
Second paragraph in div. This paragraph will not be  indented
</p>
</div>

<div>
<h3>Heading</h3>
<p>
The first paragraph inside the div.
This paragraph will not be effected.
</p>
</div>

결과는 아래와 같습니다. 

The :lang pseudo-class

 :lang 슈도 클래스는 특정 요소의 lang속성에 따라서 다른 값을 줄 때 사용합니다.

다국어 처리를 필요로하는 웹페이지를 만들때 유용하게 사용하실 수 있습니다. 예를 들면 인용문구 같은 경우에 불어에서는 꺽쇠 두개로 인용문구를 표현하지만 영어에서는 그냥 홑따옴표나 쌍따옴표를 이용합니다. 이럴때 이 :lang 슈도 클래스를 이용하시면 좋습니다.

그럼 예제를 통해서 좀더 알아보도록 하죠.  

다음 예제는 <blockquote> 태그를 현재 사용중인 언어에 맞게 변경해줍니다.

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>

위 예제에서 :lang 셀렉터는 문서 전체 요소에 적용됩니다.   

결과는 아래와 같습니다. 

...<<A quote in a paragraph>>...

Reference : http://www.tutorialspoint.com/css/css_pseudo_classes.htm