pseudo-class (가상 클래스)

css에는 가상 클래스(pseudo-class)와 가상요소(pseudo-element)가 있는 데 표기 방법으로 가상클라스는 콜론(:) 1개로 표시되고 가상요소는 두개의 콜론(::) 으로 표시합니다.
또한 가상 클래스도 일반적인 가상클래스 와 동적 가상 클래스로 구분 가능합니다.

가상 클래스(pseudo-class) 선택자

어떤 상태나 조건을 만족할때 사용할 수 있는 클래스

가상 클래스 선택자

• E:first-child (:first-child 수도 클래스)

• E:lang(c) (언어 수도 클래스)

• E[foo], E[foo="warning"], E[foo~="warning"], E[lang|="en"] (속성 선택자)

E:first-child (:first-child 수도 클래스)

E 엘리먼트 중에서 맨처음에 나오는 E 엘리먼트를 선택한다. 리스트 등을 디자인 할 때 유용하게 사용할 수 있다. IE6에서는 구현되어 있지 않다.

E:lang(c) (언어 수도 클래스)

언어가 c 인 E엘리먼트를 선택한다. 문서 안에 한국어, 일본어, 중국어가 섞여 있고 이 글 자들에 각각 다른 스타일을 적용해야 할때 유용하게 사용할 수 있는 셀렉터이다. IE6에서 는 구현되어 있지 않다.

:first-child 수도 클래스

:first-child 수도 클래스는 첫번째 엘리먼트를 선택해 옴으로써 디자인 적용에 동적인 기 능을 제공한다. 위의 리스트 디자인을 보면 각 항목간에 구분선이 있는 것을 볼 수 있다. <li> 엘리먼트에 border-top 속성을 이용해서 구현을 할 경우 처음 나오는 리스트 항목에도 위에 줄이 생 겨서 원하는 결과를 얻기는 힘들다. 그래서 이와 같은 경우 첫번째 항목에만 특정 class를 적용한다든가 해서 해결을 하게 된다.하지만 이 리스트가 동적으로 생성되는 것이라면 첫번째 항목과 나머지 항목들을 구분하 기 위해서 서버사이드나 클라이언트 사이드에서 별도의 작업을 해 주어야 한다. 이러한 추 가 작업을 :first-child 수도 클래스를 사용하면 간단히 CSS만으로 구현할 수 있다.

<style>
li {
  border-top: 1px solid #999;
  padding: 0.2em 0;
}
li:first-child {
  border-top: 0 none;
}
</style>

이와 같이 :first-child 수도 클래스를 사용하면 추가적인 로직 작업 없이 HTML과 CSS 만으로 간편하게 원하는 디자인을 적용 할 수 있다. IE6는 아직 구현되어 있지 않다.

:first-line, :first-letter 수도 클래스

:first-line, :first-letter 수도 엘리먼트는 :first-child 수도 클래스와 비슷한 기능을 가지고 있다. :first-child 수도 클래스가 첫번째 나오는 하위 항목을 선택하는 것과 비슷하 게 :first-line 수도 클래스는 첫번째 라인을, :first-letter 수도 클래스는 첫번째 글자를 선 택할 수 있다. 차이가 있다면 수도 클래스의 경우는 기존에 생성되어 있는 엘리먼트를 선 택해 오지만 수도 엘리먼트의 경우는 코드상에는 별도의 엘리먼트가 없지만 마치 다른 엘 리먼트로 구별 되어 있는 것 같이 해당하는 엘리먼트를 생성해서 선택해 온다.

문단의 첫번째 글자인 "원"자의 클씨 크기를 크게 하고 문단의 첫번째 줄에 밑줄이 그어 져 있다. 이러한 디자인을 적용하기 위해서는 아래와 같은 코드를 작성해서 별도의 클래스 를 적용해 주어야 한다.

<p><span class="first-line"><span class="first-child">원</span>칙은..

:first-line 수도 엘리먼트와 :first-letter 수도 엘리먼트를 사용하면 위와 같이 <span> 엘리먼트를 삽입한 것과 같은 효과를 CSS만으로 구현 할 수 있다.

<style>
p {
  margin: 3em;
  line-height: 1.6em;
  font-family: AppleMyungJo, serif;
}
p:first-line {
  text-decoration: underline;
}
p:first-letter {
  float: left;
  font-weight: bold;
  font-size: 3.5em;
}
</style>

동적 가상클래스 선택자

사용자의 액션이 있을 때 마다 선택되는 선택자

• :link, :visited, :hover, :active, :focus 수도 클래스
• :first-child 수도 클래스
• :first-line, :first-letter 수도 클래스

CSS는 선언적인 특성을 가지고 있기 때문에 문서에 동적으로 스타일을 적용하기는 힘들 지만 pseudo class, pseudo element라는 것을 제공함으로써 몇가지 경우에 있어서는 동 적으로 스타일을 적용 할 수 있다. 첫번째 엘리먼트라든가 첫번째 글자 등을 따로 선택한 다든가 마우스 액션에 따른 스타일을 적용한다든가 하는 것을 이를 이용해서 할 수 있다.

:link, :visited (링크 수도 클래스)

:link, :visited 수도 클래스는 이미 대부분의 사람들이 사용하고 있는 수도 클래스 이다.
바로 링크가 되어 있는 엘리먼트와 방문한 링크를 선택할 수 있는 수도 클래스 인데, 수도 클래스는 이와 같이 순차적으로 적용 되는 것이 아니고 특정 조건을 가진 엘리먼트를 선택 해 올 수 있는 기능을 제공한다.

:hover, :active, :focus (동적 수도 클래스)

:hover와 :active 수도 클래스는 마우스의 사용과 함께 보다 다양한 스타일 적용을 할 수 있게 해 준다.
MSIE에서는 이 수도클래스가 <a>에서만 작동을 해서 링크 스타일 외의 사용은 많지 않지만 대부분의 브라우져들은 이 수도클래스를 <a>이외의 엘리먼트에도 사용 할 수 있다.
예를 들어서 <tr>에 마우스가 오버되었을때 컬러를 바꾸는 것을 :hover를 이용해서 표현이 가능하다.

tr:hover td {
  background: #eee;
}

이와같이 하면 마우스가 올라갔을때 배경색이 바뀌는 기능을 javascript를 사용하지 않고 CSS만으로 구현할 수 있다. 이보다 더 유용한 것으로 :focus 수도 클래스가 있다. 이 수도 클래스는 엘리먼트에 포커 스가 이동되어 왔을 때를 선택 할 수 있다. 이를 <input>이나 <select>등에 적용하면 사 용자는 자신의 포커스가 현재 어디에 있는지 화면상에서 확실하게 알 수 있다. 아래의 회 원가입 폼을 보면 현재의 포커스가 이동해 있는 성명 부분의 <input>의 배경 색이 다른 것들과 다른 것을 볼 수 있다.