CSS Selector II

Home > Document > CSS > Introduction > CSS selector II

CSS Selector II (*** FF, Opera etc. Only 2006년 5월 16일 화요일 현재)

이번 페이지에서는 그 동안 다루지 않았던 '나머지 Selector들'에 대해 다루어 보려고 합니다. '나머지 selector들' 이란 표현은 없던 selector가 갑자기 생겨난 것이 아니라, 현재 시점(2006년 5월 16일 화요일)까지도 IE 6.0 에서 지원하지 못하는 selector들을 말하는 것 입니다. 하지만 FF 등의 브라우저에서는 현재 거의 완벽하게 지원되고 있으며, 향후에 발표되는 IE version에서 지원 될지도 모르므로, 그 동안 다루지 않았던 나머지 CSS selector 들에 대해 다루려고 하는 것 입니다.

사실 IE 가 CSS Level 2를 완벽하게 지원하지 못하므로해서 생기는 CSS 사용에 대한 선택권의 축소라는 면에서, 그 폐해가 실로 큽니다. 한마디로 이로 인해서 IE 가 CSS 사용자의 CSS 문서 구조 자체에 대한 '선택권의 제한 및 축소' 라는 엄청난 민폐를 끼치고 있다고 할 수 있는거죠. 따라서 향후에 발표된다고 하는 IE 7 에서는 이런 문제점들이 말끔히 개선되어서 위의 제목에 붙은 'FF Only'를 떼어 내고, 사용자 모두가 보다 편리하게 문서를 만들 수 있기를 바라는 마음으로 시작해 보겠습니다.

Selector의 우선 순위와 적용 조건

아래의 표는 CSS Level 2에서 사용할 수 있는 selector들 입니다. 아래 표에 표기한 'E' 는 HTML이나 XML에서 사용하는 element들을 뜻하고, 적용 pattern 이란 해당 항목의 pattern과 일치하는 조건을 갖추었을 경우, 지정한 CSS property와 값들이 적용된다는 것을 말 합니다. 그리고 우선 순위의 경우 아래의 표에는 우선 순위가 가장 낮은 universal selector에서 부터 우선 순위가 가장 높은 ID selector 순으로 표시되어 있습니다. 아래 표에 나오는 selector 중에 child, sibling, descendant 등에 대한 개념에 대해 자세히 알고 싶으면, 이 사이트의 XML > XML Document > Document Map을 참고 하시기 바랍니다.

위에서 말했다시피 이 페이지에서 다루는 selector들은 모두 FF 나 Opera 등에서만 지원되므로 IE에서는 실행 해도 말짱 헛일 입니다.

E : Element (HTML 이나 XML 에 사용되는 Element들)
적용 Pattern	설 명	Selector 명칭
*	문서에 사용된 모든 element에 적용됨.	Universal selector
E	지정한 element에만 적용됨. (예: p{color:#333} 이면 모든 p element의 글자색이 #333이 됨)	Type selectors
E F	E element 의 자손인 F element (들)에 적용됨.	Descendant selectors
E > F	E element의 자식인 F element에만 적용됨.	Child selectors
E:first-child	E element의 첫 번째 자식 element 에만 적용됨.	The :first-child pseudo-class
E:link	방문하지 않은 A element의 hyperlink 글자에 적용됨.	The link pseudo-classes
E:visited	방문한 A element의 hyperlink 글자에 적용됨.	The link pseudo-classes
E:hover	E element 위에 cursor가 올라 갔을 때 적용됨.	The dynamic pseudo-classes
E:active	E element 위에서 click 등의 동작을 했을 때 적용됨
E:focus	E element 에 focus가 생겼을 때 적용됨
E:lang(c)	언어 code(c)를 지정한 E element에 적용됨.	The :lang() pseudo-class
E + F	같은 부모를 가짐과 동시에 서로 형제(sibling) 관계인 E element 다음에 오는 F element에 적용됨.	Adjacent selectors
E[attr]	중괄호 속에 지정한 '[attr]' attribute를 사용하는 모든 E element에 적용됨.	Attribute selectors
E[attr="attVal"]	중괄호 속에 지정한 '[attr]' attribute의 값이 attVal 인 모든 E element에 적용됨.
E[attr~="attVal"]	'attr' attribute 의 값 들이 공백(space)으로 분리되어 있을 경우, 그 값 들 중에 하나가 'attVal' 과 일치하면 적용됨.
E[attr\|="attVal"]	'attr' attribute의 값이 hyphen (- : minus)으로 분리되어 있을 경우 분리된 단어가 'attVal'로 시작(왼쪽에서 오른쪽 방향으로)하는 E element에 적용됨.
E.clsName	HTML에만 적용되는 selector. clsName 이라는 이름의 class attribute를 E element 에 사용할 때만 적용됨. E[class~="clsNmae"] 으로 지정한 것과 동일함.	Class selectors
E#IDREF	IDREF 라는 이름의 ID attribute를 E element 에 사용할 때만 적용됨.	ID selectors

Child Selector

Child Selector는 child element(어떤 element의 한 단계 하위 element)에만 적용되는 selector 입니다. 따라서 아래의 예제에서 두 번째 'p' 속에 있는 2 단계 하위 인 span element에는 적용되지 않고 첫 번째 'p' element의 child element인 span element에만 적용 됩니다.

E > F

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Child Selector</title>
    <style type="text/css">
    <!-- 
    p > span {color:red;} 
    -->
    </style>
  </head>
  <body>
      <p><span>red</span></p>
      <p><div><span>not red</span></div></p>
  </body>
</html>

:first-child pseudo class

이 selector는 어떤 element의 child element가 여러개 있을 경우 그 child element중, 첫 번째 child element에만 적용되는 selector 입니다. 예를 들어 아래의 code에서 div element는 3 개의 p element를 자식으로 가지는데 이 중에 첫 번째 p element만 {font-weight:bold} 가 적용 됩니다.

E:first-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>first-child Selector</title>
    <style type="text/css">
    <!-- 
    div > p:first-child{font-weight:bold;}
    -->
    </style>
  </head>
  <body>
    <div class="text">
      <p>bold text</p>
      <p>normal text</p>
      <p>normal text</p>
    </div>
  </body>
</html>

Dynamic pseudo class

이 selector들은 IE가 지원하지 않는 관계로, 흔히 a element에만 사용되는 것으로 알고 있는 경우가 많은데, 사실은 모든 block level과 text level element에 적용됩니다. :hover는 cursor가 지정한 element 위에 올라 갔을 때, :active는 지정한 element 에서 click 등의 동작이 일어났을 때, :focus 는 지정한 element에 focus가 들어 갔을 때 의 CSS property들을 지정할 수 있습니다. FF에서 실행한 후에 각 div에 mouse를 올리거나 click 등의 동작을 해 보고, 또한 tab key를 쳐서 focus를 이동하면 :focus에 지정한 {background-color:red;}가 나타 납니다.

Dynamic pseudo class

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Dynamic pseudo class</title>
    <style type="text/css">
    <!-- 
    div.dyna:hover{background-color:gold;}
    div.dyna:active{background-color:blue;}
    div.dyna:focus{background-color:red;}
    -->
    </style>
  </head>
  <body>
    <div class="dyna" tabindex="10">Div 1</div>
    <div class="dyna" tabindex="20">Div 2</div>
    <div class="dyna" tabindex="30">Div 3</div>
    </div>
  </body>
</html>

:lang pseudo class

이 selector는 지정하는 lang attribute의 값이 일치하는 element에만 적용 됩니다. 아래의 code 중에 div:lang(ko)로 지정한 div에만 {color:blue;font-size:12px;}가 적용 됩니다. 그리고 XML 의 경우 xml:lang="LanguageCode"를 사용한 element에만 적용 됩니다.

E:lang(c)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>first-child Selector</title>
    <style type="text/css">
    <!-- 
    div:lang(ko){color:blue;font-size:12px;}
    -->
    </style>
  </head>
  <body>
    <div lang="ko">
      나는 한글을 사용하고 있습니다.
    </div>
    <div lang="en">
      나는 한글 아니거든...
    </div>
  </body>
</html>

Adjacent Selector

Adjacent selector는 같은 부모를 가지면서 인접한 형제(sibling)관계인 element에 적용 됩니다. 예를 들어 아래의 code 와 같이 div 속에 h1과 h2가 인접(adjacent)해 있으면 h1 다음의 h2에만 {font-style:italic;}이 적용 됩니다.

E + F

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>first-child Selector</title>
    <style type="text/css">
    <!-- 
    h1 + h2{font-style:italic;}
    -->
    </style>
  </head>
  <body>
    <div>
      <h1>normal</h1>
      <h2>italic</h2>
      <h2>normal</h2>
    </div>
  </body>
</html>

Attribute Selector

Attribute selector는 element에 사용된 attribute와 attribute 값 등이 selector로 지정하는 어떤 조건과 일치할 때 적용되는 selector 입니다. 크게 나누어 아래의 4 가지의 조건식을 사용할 수 있습니다.

1. E[attr]

이 조건은 'attr' 이라는 attribute를 사용하는 모든 E element에 적용 되는 selector 입니다. 예를 들어 아래의 code에서와 같이 title attribute를 사용하는 모든 element(아래에서는 h1) 에만 {background-color:gold}가 적용 됩니다.

E[attr]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attribute Selector 01</title>
    <style type="text/css">
    <!-- 
    *[title]{background-color:gold;} /* title attribute를 사용하는 문서내의 모든 element(*)에 적용. */ 
    -->
    </style>
  </head>
  <body>
    <div>
      <h1 title="큰 제목">Gold background</h1>
      <h2>나는 gold 아니거든...</h2>
      <h3>나도 아니거든...</h3>
    </div>
  </body>
</html>

2. E[attr="attVal"]

이 경우는 'attr'이라는 attribute를 사용하는 element 중에 그 값이 'attVal' 인 'E' element에만 적용 되는 selector 입니다. 아래의 예제에서는 href="http://www.cadvance.org/"인 A element(들)만 {font-weight:bold;} 가 적용 됩니다. 이 때 'attVal' 에 해당하는 값은 반드시 단순 따옴표(') 나 이중 따옴표(")로 묶어 줘야 됩니다.

E[attr="attVal"]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attribute Selector 02</title>
    <style type="text/css">
    <!-- 
    a[href="http://www.cadvance.org/"]{font-weight:bold;}
    -->
    </style>
  </head>
  <body>
    <div>
      <a href="http://www.cadvance.org/">나는 굵은 글씨</a><br />
      <a href="http://www.cadvance.org/">나는 굵은 글씨</a><br />
      <a href="http://www.w3.org/">나는 가는 글씨</a><br />
    </div>
  </body>
</html>

3. E[attr~="attVal"]

때로는 attribute 값이 space로 분리되어, 여러개 일 경우가 있습니다. 이 때 attribute 값들 중에, 지정하는 'attVal'과 일치하는 값을 가진 element에만 적용 됩니다. 예를 들어 아래의 code 에서 class 값 중에 'a' 를 포함한 class attribute를 가지는 p element(아래 code에서는 첫 번째, 세 번째)에만 {color:blue;}가 적용 됩니다.

E[attr~="attVal"]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attribute Selector 03</title>
    <style type="text/css">
    <!-- 
    .a{font-size:12px;}
    .b{text-decoration:underline;}
    .c{font-family:Arial;}
    p[class~="a"]{color:blue;}
    -->
    </style>
  </head>
  <body>
    <div>
      <p class="a b">12px, underline, blue color</p>
      <p class="b c">underline, arial</p>
      <p class="a c">12px, arial, blue color</p>
    </div>
  </body>
</html>

4. E[attr|="attVal"]

위의 E[attr~="attVal"]과 비슷한 형태로서, attribute 값이 hyphen ( - :minus기호)을 포함하고 있을 경우 '-' 기호 앞(왼쪽에서 오른쪽 방향으로)의 문자(들)가, "attVal"에 지정한 문자(들)와 일치하는 경우에 적용 됩니다. 위의 'attr' 다음의 '|' 기호(vertical bar)는 keyboard 중에 원화 표시(또는 backslash)를 shift key를 누르고 찍을 때 생기는 기호 입니다. 아래의 code 중에 두 번째 p element는 'a'를 포함하고 있지만 '-' 기호 앞에 있는 'a' 가 아니므로 {color:blue;}가 적용되지 않습니다.

E[attr|="attVal"]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attribute Selector 04</title>
    <style type="text/css">
    <!-- 
    .a{font-size:12px;}
    .b{text-decoration:underline;}
    .c{font-family:Arial;}
    p[class|="a"]{color:blue;}
    -->
    </style>
  </head>
  <body>
    <div>
      <p class="a-b">12px, underline, blue color</p>
      <p class="b-a">underline, arial</p>
      <p class="a-c">12px, arial, blue color</p>
    </div>
  </body>
</html>

향후 IE가 CSS Level 2의 selector와 모든 CSS property들을 지원하게 되면...

어떤 현상이 생길까요? 물론 이런 것들을 지원해야 됨은 지극히 당연하지만, 한편으로는 현재 만들어진 internet 상의 web page들의 대대적인 수정으로 인한 다소간의 혼란이 있지 않을까 예상되어 매우 걱정 스럽습니다. 제 개인적으로도 IE의 CSS Level 2의 지원 정도에 따라 CSS에 대한 근본적인 수정작업을 하고 싶으니까요. 뭐 저야 어떻게든 거기에 맞추겠지만 초보자들이 혼란에 휩싸이지 않을지 염려 되는군요. 들리는 말로는 IE 7의 발표 시기가 올 여름 쯤 이라던데, 이 페이지가 그 때를 대비한 약간의 도움이라도 되기를 바라면서 여기서 마치도록 하겠습니다.

IE 7.0 test 결과(2006. 9)

순전히 IE 7.0을 테스트해 볼 요량으로 쓰지도 않을 XP를 깔고 IE 7.0을 설치한 후 이 페이지의 예제들을 테스트 해 보았습니다. 그랬더니 :lang pseudo class를 제외한 나머지 selector 들을 지원하는군요. 참고로 말하면 display property의 table 관련 keyword 들은 여전히 안되고 있습니다.

Top

Back

New

검색