blogger jely : Pseudo Selectors

h1 { color: #fff; }
css는 보통 위와 같이 사용작성합니다. 이때 중괄호 앞부분에 있는 h1 영역을 Selector 라고 하는데, 일반적으로 html 태그를 써주거나 태그.class 또는 태그#id 와 같은 방식으로 사용합니다.

div.usermenu { font-size: 11px; } <- class attribute selector
#header { margin: 0 auto; } <- id attribute selector
a:hover { text-decoration: underline; } <- pseudo selector

selector 중에는 위의 a:hover 처럼 사용하는 방법도 있습니다. 이렇게 사용하는 selector를 Pseudo Selector 라고 합니다. a:link, a:visited, a:hover, a:active 는 대부분 알고 계실텐데 유용한 :first-line, :first-letter, :before, :after, :first-child 에 대해 알려 드리겠습니다.

1. :first-line - 첫 줄의 속성을 변경합니다.

css:
p:first-line { color: #090; }
html:

<p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>

view1:

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

문단의 첫 번째 줄의 색을 녹색으로 바꿔줍니다. 문단이 좁으면 좁은대로 어쨌든 첫번째 줄의 style을 변경합니다.

view2:

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

2. :first-letter - 첫 글자의 속성을 변경합니다.

css:

div:first-letter {
   font-size: 15px;
   font-weight: bold;
   padding-left: 15px;
   }

html:

<div>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</div>

view:

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세

div 내의 첫 글자를 15px, 굵게, 왼쪽 여백을 줬습니다. 참고로 왼쪽 여백은 text-indent 속성을 사용하셔도 됩니다.

p { text-indent: 15px; }

3. :before - 앞 부분에 원하는 속성을 추가합니다. (IE는 안되요)

css:

a.tail_trb:before {
   content: url(http://pds1.egloos.com/pds/1/200511/15/74/trb_l.png);
}

html:
<a href="#" class="tail_trb">관련글</a>
view:
관련글
관련글 앞에

아이콘을 붙여 줍니다. 응용하여 마우스를 올렸을 때 아이콘이 보이게도 할 수 있습니다.

css:

a.tail_trb:hover:before {
   content: url(http://pds1.egloos.com/pds/1/200511/15/74/trb_l.png);
}

html:
<a href="#" class="tail_trb">관련글</a>
view:
관련글

4. :after - 뒷 부분에 원하는 속성을 추가합니다. (IE는 안되요)

css:
a.tail_cmt:after { content: " Yo!"; }
html:
<a href="#" class="tail_cmt">덧글</a>
view:
덧글
트랙백 앞에

5. :first-child - 첫 등장하는 태그의 속성을 변경합니다. (IE는 안되요)

css:
span:first-child { background-color: #e0ffe0; }
html:
그래 나는 행복한 사람
view:
그래 나는 행복한 사람
첫번째 span만 스타일이 적용됩니다.