E:first-child (:first-child 수도 클래스)
E 엘리먼트 중에서 맨처음에 나오는 E 엘리먼트를 선택한다.
리스트 등을 디자인 할 때 유용하게 사용할 수 있다.
IE6에서는 구현되어 있지 않다.
:first-child 수도 클래스는 첫번째 엘리먼트를 선택해 옴으로써 디자인 적용에 동적인 기능을 제공한다.
위의 리스트 디자인을 보면 각 항목간에 구분선이 있는 것을 볼 수 있다.
<li> 엘리먼트에 border-top 속성을 이용해서 구현을 할 경우 처음 나오는 리스트 항목에도 위에 줄이 생겨서 원하는 결과를 얻기는 힘들다.
그래서 이와 같은 경우 첫번째 항목에만 특정 class를 적용한다든가 해서 해결을 하게 된다.
하지만 이 리스트가 동적으로 생성되는 것이라면 첫번째 항목과 나머지 항목들을 구분하기 위해서 서버사이드나
클라이언트 사이드에서 별도의 작업을 해 주어야 한다.
이러한 추가 작업을 :first-child 수도 클래스를 사용하면 간단히 CSS만으로 구현할 수 있다.
E:lang(c) (언어 수도 클래스)
언어가 c 인 E엘리먼트를 선택한다.
문서 안에 한국어, 일본어, 중국어가 섞여 있고 이 글자들에 각각 다른 스타일을 적용해야 할때
유용하게 사용할 수 있는 셀렉터이다.
IE6에서는 구현되어 있지 않다.
E 엘리먼트 중에서 맨처음에 나오는 E 엘리먼트를 선택한다.
리스트 등을 디자인 할 때 유용하게 사용할 수 있다.
IE6에서는 구현되어 있지 않다.
:first-child 수도 클래스는 첫번째 엘리먼트를 선택해 옴으로써 디자인 적용에 동적인 기능을 제공한다.
위의 리스트 디자인을 보면 각 항목간에 구분선이 있는 것을 볼 수 있다.
<li> 엘리먼트에 border-top 속성을 이용해서 구현을 할 경우 처음 나오는 리스트 항목에도 위에 줄이 생겨서 원하는 결과를 얻기는 힘들다.
그래서 이와 같은 경우 첫번째 항목에만 특정 class를 적용한다든가 해서 해결을 하게 된다.
하지만 이 리스트가 동적으로 생성되는 것이라면 첫번째 항목과 나머지 항목들을 구분하기 위해서 서버사이드나
클라이언트 사이드에서 별도의 작업을 해 주어야 한다.
이러한 추가 작업을 :first-child 수도 클래스를 사용하면 간단히 CSS만으로 구현할 수 있다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>:first-child pseudo class</title>
<style type="text/css">
li {
border-top: 1px solid #999;
padding: 0.2em 0;
}
li:first-child {
border-top: 0 none;
}
</style>
</head>
<body>
<ul>
<li>포스텍 임기홍 교수 이달의 과학기술자상</li>
<li>"노출된 개인정보 즉시 신고하세요"</li>
<li>마침내 선보인 보안이 강화된 「파이폭스 1.5」</li>
<li>러시아 국립광학연구원(SOI) 한국에 온다</li>
<li>여수 거북선사이버해전체험관</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>:first-child pseudo class</title>
<style type="text/css">
li {
border-top: 1px solid #999;
padding: 0.2em 0;
}
li:first-child {
border-top: 0 none;
}
</style>
</head>
<body>
<ul>
<li>포스텍 임기홍 교수 이달의 과학기술자상</li>
<li>"노출된 개인정보 즉시 신고하세요"</li>
<li>마침내 선보인 보안이 강화된 「파이폭스 1.5」</li>
<li>러시아 국립광학연구원(SOI) 한국에 온다</li>
<li>여수 거북선사이버해전체험관</li>
</ul>
</body>
</html>
E:lang(c) (언어 수도 클래스)
언어가 c 인 E엘리먼트를 선택한다.
문서 안에 한국어, 일본어, 중국어가 섞여 있고 이 글자들에 각각 다른 스타일을 적용해야 할때
유용하게 사용할 수 있는 셀렉터이다.
IE6에서는 구현되어 있지 않다.
'IT 소프트웨어 > CSS' 카테고리의 다른 글
| 표준코딩에서 vertical-align : middle; 적용하기 (6) | 2010.03.11 |
|---|---|
| header 있고 body 있을때 body가 100% 높이 유지하도록 (0) | 2010.03.09 |
| float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법 (10) | 2010.01.26 |
| IE8에서 이미지 사이의 여백 생기는 문제 (11) | 2010.01.15 |
| 스크롤바 관련 CSS (0) | 2009.10.20 |
