[CSS] 23. Pseudo Classes ( 슈도 클래스 )

<<" ">>" "<" ">"; } </style>

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

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

 

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

selector:pseudo-class {property: value}

 

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

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

 

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

Value	Description
:link	Use this class to add special style to an unvisited link.
:visited	Use this class to add special style to a visited link.
:hover	Use this class to add special style to an element when you mouse over it.
:active	Use this class to add special style to an active element.
:focus	Use this class to add special style to an element while the element has focus.
:first-child	Use this class to add special style to an element that is the first child of some other element.
:lang	Use this class to specify a language to use in a specified element.

<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> But it will not match the paragraph in this HTML: <div> <h3>Heading</h3> <p> The first paragraph inside the div. This paragraph will not be effected. </p> </div>

 

결과는 아래와 같습니다. 

First paragraph in div. This paragraph will be indented Second paragraph in div. This paragraph will not be indented But it will not match the paragraph in this HTML: Heading The first paragraph inside the div. This paragraph will not be effected.

 

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