컨텍스츄얼 셀렉터(Contextual Selector)

strong i {color:red}

위와 같이 몇 개의 selector를 나열하 듯이 쓰는 경우 뒤에 나온 것은 앞에 나온 selector 내에서만 의미를 갖는다.

위의 스타일 정의는, strong 태그 안에서 나오는 i 태그만 빨간색이 된다.

이미지를 링크로 활용할 때 경계선을 감추는 경우 contextual selector를 이용하면 기존 html 태그처럼 일일이 border=0을 쓸 필요 없다.

a img { border:0; }a 태그 내부에서 img 태그가 나오는 경우 border는 0이 된다

xhtml과 관계는?

xhtml은 html을 xml의 형태로 확장한 것이다. xml처럼 html 태그가 서맨틱스적인 면, 즉, 태그가 감싸고 있는 내용이 어떤 내용인지를 설명하는 식으로 사용하게 하려는 1단계로 xml의 엄격한 형식을 사용하도록 권장한 것. 따라서 xhtml 태그 중 div태그로 페이지의 구성 요소를 가장 큰 범위부터 계층적으로 정의를 한 다음, 그 내부에 들어가는 개별적인 덩어리들을 역시 div class="의미있는이름"로 정의하면 웹페이지가 구조적으로도 깔끔할 뿐만 아니라 개별 의미 덩어리로도 구분될 수 있는 형태가 된다. 그리고 바로 여기에 컨텍스츄얼 실렉터를 사용함으로써 스타일까지 문맥에 맞게 계층적으로 정의할 수 있다.

어떤 페이지를 크게, 헤더, 제목(대/중/소), 요약설명, 본문, 하부 네비게이션으로 나누었다면, 이들을 가장 큰 단위로 생각하며 각자 클래스를 정의하고, 이들 큰 구성요소의 하부단위 역시 개별적 클래스 정의를 한 다음 이들의 스타일을 문맥에 맞게 정의할 수 있다.

만약, "본문" 클래스에서 나오는 링크는 밑줄을 보이도록 하고 네비게이션 클래스에 나오는 링크에서는 밑줄을 보이고 싶지 않다면 컨텍스츄얼 실렉터를 이용해서 다음과 같이 정의할 수 있다.

a:link{font-size:12px;color:006;text-decoration:underline}
a:visited{font-size:12px;color:006;text-decoration:underline}
a:hover{font-size:12px;color:69c;text-decoration:underline}
a:active{font-size:12px;color:006;text-decoration:underline}

.navigation a:link{font-size:12px;color:309;text-decoration:none}
.navigation a:visited{font-size:12px;color:309;text-decoration:none}
.navigation a:hover{font-size:12px;color:fc6;text-decoration:underline}
.navigation a:active{font-size:12px;color:309;text-decoration:none}

"navigation" 클래스 내에 나오는 링크는 .navigaton a에서 정의된 스타일로 보여지므로 개별적으로 정의된 컨텍스츄얼 실렉터의 조종을 받게 된다. "navigation"이 아닌 나머지는 가장 상위 레벨에서 정의한 스타일대로 보일 뿐이다.

또는 마우스를 링크 위에 가져갔을 때만 다른 컬러로 보이고 싶다면

.navigation a:hover {font-size:12px; color:#69c;text-decoration:underline}

이것만 써주면 된다. 나머지는 위에서 정의한 것을 그대로 상속하므로 따로 정의할 필요가 없다.

a:link, a:visited, a:active {font-size:12px; color:#006;text-decoration:underline}
a:hover {font-size:12px; color:#69c;text-decoration:underline; }
.navigation a:hover {font-size:12px; color:#69c;text-decoration:underline}