CSS셀렉터 정리(1)

그 동안 CSS셀렉터를 IE6에 맞춰서 작업을 해오다보니 항상 사용하는 셀렉터를 한정 시킬 수 밖에 없었다. 애초 CSS셀렉터가 가지고 있는 많은 기능을 포기하고 사용하지 못했던게 사실(브라우저의 CSS셀렉터의 지원현황을 테스트).

하지만 IE7이 등장하고 (아직 많이 부족하지만) 그동안 지원하지 않던 셀렉터 등을 지원하기 시작했다. 현재 W3C CSS3 Selectors는 Working Draft단계이지만 많은 모던 브라우저에서 어느 정도 구현이 가능하므로 지금부터라도 이해하고 익혀두면 두고두고 많은 도움이 되리라고 생각한다.

나도 아직 피상적으로만 이해하고 있는 부분이 많아서 이번 기회를 빌어서 한번 정리를 해 볼까 한다.(대부분의 내용은 加藤善規(카토 요시키)씨의 CSS セレクタに関するおさらい | WWW WATCH을 번역한 내용임)

CSS셀렉터란 무엇인가?

CSS는 “스타일을 지정할 대상(셀렉터：selector)”과 “적용할 내용(선언블록： property : value ;)”, 이렇게 두가지로 구성되어 있다. 선언블록은 다시 프로퍼티(property)와 값(value)으로 나누어 진다.

CSS셀렉터는 스타일을 지정할 대상을 일컫는다.

유니버살 셀렉터(Universal selector)

유니버살 셀렉터는 모든 요소를 대상으로 하는 셀렉터이다. CSS2에 정의되어 있다.

단독으로 사용하여 브라우저의 기본 스타일을 제거한다던지(유니버살 셀렉터를 사용하지 않고 브라우저의 기본 스타일을 제거하는 경우는 YUI를 참고)

* {
margin:0;
padding:0;
}

다른 셀렉터와 조합하여 사용한다.

ul#foo * li {
margin:0;
padding:0;
}

foo라는 id를 가진 ul요소의 직접적인 자식요소는 제외하고 손자요소 이하의 li요소에 스타일을 적용하는 것이 가능하다.

타입 셀렉터(Type selector)

E

타입 셀렉터는 가장 단순한 셀렉터이다. 요소명을 지정하여 그 요소에 스타일을 적용시킨다.

p {
margin:0;
padding:0;
}

속성 셀렉터(Attribute selectors)

E[foo]

어떤 요소 중에서 지정한 속성을 가지고 있는 요소에 스타일을 적용한다. CSS2에 정의되어 있다.

p[class] {
margin:0;
padding:0;
}

위와 같이 class속성을 가진 요소에만 스타일을 적용 시킬 수 있다.

E[foo="bar"]

같은 속성 셀렉터이지만 속성명뿐만이 아니라 그 값도 포함해서 지정한다. CSS2에 정의되어 있다.

a[rel="external"] {
padding-right:15px;
background:(image/external-icon.png) no-repeat right center;
}

예를 들어 위와 같이 외부링크의 a요소에만 rel속성으로 external을 지정해서 외부링크에만 아이콘을 표시하는 것도 가능하다.

E[foo~="bar"]

어떤 요소 중에서 지정한 속성명 및 속성값을 가지고 있는 요소에 스타일을 지정하지만 “~”을 사용하므로써 복수의 속성값이 지정되어 있는 경우에는 지정한 속성값을 포함하고 있으면 적용한다. CSS3에 정의되어 있다.

p[class~="foo"] {
margin:0;
padding:0;
}

class 속성을 가진 p요소 중에서 foo라고 하는 속성값을 포함하고 있는 요소에 스타일을 적용한다.

E[foo^="bar"]

어떤 요소 중에서 지정한 속성명 및 속성값을 가지고 있는 요소에 스타일을 지정하지만 “^”을 사용하므로써 지정한 문자로 시작하는 속성값에 대해서만 스타일을 적용한다. CSS3에 정의되어 있다.

p[class^="ex"] {
margin:0;
padding:0;
}

class속성을 가진 p요소 중에서 ex로 시작하는 속성값을 가진 요소에 스타일을 적용한다.

E[foo$="bar"]

어떤 요소 중에서 지정한 속성명 및 속성값을 가지고 있는 요소에 스타일을 지정하지만 “$”를 사용하므로써 지정한 문자로 끝나는 속성값에 대해서만 스타일을 적용한다. CSS3에 정의되어 있다.

a[href$=".pdf"] {
padding-right:15px;
background:(image/pdf-icon.png) no-repeat right center;
}

예를 들어 위와 같이 파일의 확장자(extension)를 지정하여 PDF파일에 대한 링크에는 PDF를 나타내는 아이콘을 표시하는 사용법도 가능하다.

E[foo*="bar"]

어떤 요소 중에서 지정한 속성명 및 속성값을 가지고 있는 요소에 스타일을 지정하지만 “*”을 사용하므로써 지정한 문자열을 포함한 속성값에 대해서만 스타일을 적용한다. CSS3에 정의되어 있다.

p[class*="ex"] {
margin:0;
padding:0;
}

class속성을 가진 p요소 중에서 ex를 포함한 속성값을 가진 요소에 스타일을 적용한다.

E[hreflang|="en"]

hreflang속성을 가진 요소에 사용하는 셀렉터이다. hreflang속성값의 앞부분이 일치하는 요소에 적용한다(E[lang|="en"]도 동일).

a[hreflang|="en"] {
padding-right:15px;
background:(image/en-icon.png) no-repeat right center;
}

hreflang요소를 가진 a요소 중에서 속성값에 en-US 등 en을 앞부분에 포함한 값을 가진 요소에만 스타일이 적용한다. 위의 예처럼 링크가 걸린 페이지가 영어인 경우에 영어 사이트를 나타내는 아이콘을 표시하는 등의 용도로 사용할 수 있다. CSS2에 정의되어 있다.

다음 시간에는 유사클래스(Structural pseudo-classes)에 대해 알아보겠다.