1) first-child가상 클래스
<style type="text/css">
.lyrics {font-size:12px; font-weight:bold; color:#44C4DF; width:500px;}
.lyrics p:first-child{color:#E7963D; font-size:15px; text-indent:1em;}
</style>
lyrics클래스의 자식요소중에 첫 번째 p요소에만 속성이 적용됩니다.
익스6이하버전에선 안되구요.
적절히 쓰면 불필요한 클래스를 사용하지않아도 되는 방법이죠~
<div class="lyrics">
<p>옛날의 금잔디 동산에 메기같이 앉아서 놀던 곳 물레방아 소리 들린다 메기야 희미한 옛생각</p>
<p>동산 수풀은 우거지고 장미화는 피어 만발 하였다 물레방아 소리 그쳤다 메기</p>
</div>
2) 링크 가상 클래스
이 부분은 많이들 쓰는것이니 간단히 정의만 보겠습니다.
<style type="text/css">
.a {text-decoration:none;
a:link {color:blue;} ->방문하지않은 링크
a:visited {color:pink;} ->방문한 링크
a:hover {color:orange;} -> 링크위에 마우스를 올렸을 때
a:active {color:red;} -> 활성화 된 링크
a:focus {background-color:#ffc;} -> 링크위에 포커스 되었을때(키보드 사용자에게 유용한기능입니당.)</style>
선언 순서에 유의해야합니다. link -> visited -> hover -> active -> focus 순으로 지정합니다.
'웹표준 개발' 카테고리의 다른 글
| CSS 선택자(selector)에 대해서 정리해봅니다. 4 (2) | 2010/07/09 |
|---|---|
| CSS 선택자(selector)에 대해서 정리해봅니다. 3 (1) | 2010/06/04 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 2 (0) | 2010/05/31 |
| CSS 선택자(selector)에 대해서 정리해봅니다. 1 (2) | 2010/05/20 |
| [웹표준 코딩]CSS 폰트 단위를 알아봅시다 (2) | 2010/05/06 |
| 웹페이지에 옷을 입히는 스타일시트 연결 (1) | 2010/04/26 |
