속성 선택자(attribute selector)는 매우 편리한 도구이다. 이 선택자를 사용하면 href라는 속성이 있는지 또, 구체적으로 그 속성값으로 엘리먼트를 선택해서 스타일을 부여할 수 있게 할 수 있다.아래에 나오는 예제를 보고 참고하자.
※ title이라는 속성을 갖는 모든 링크는 빨간색으로 만들 수 있다. a[title] { color : #c00; }
※ 좀 더 구체적으로, rant라는 클래스를 갖는 모든 문단은 굵고 대문자로 보여진다. p[classs="rant"] { font-weight : bold; text-transfor : uppercase; } <p class="rant" >But I am done apologizing. I am reallizing... </p>
자식선택자를 사용하면 정의된 요소의 바로 한 단계 하위에 있는 자식요소를 선택할 수 있다. 예를 들면 페이지에 있는 나머지 링크는 그대로 놔두고 특정 리스트의 바로 한 단계 아래에 있는 링크만 다른 스타일을 지정할 수 있다.아래에 나오는 예제를 보고 참고하자.
※ 이 스타일은 <div> 엘리먼트의 한 단계 하위인 <a> 엘리먼트에 대해서만 영향을 끼친다. div > a { text-indent: -9990px; } <div> <a href="#content">Skip to content</a> <ul> <li><a href="#Andy">Andy buddy</a></li> <li><a href="#Jermy">Jermy Keith</a></li> <li><a href="#Richard">Richard Rutter</a></li> </ul> </div>
인접 형제 선택자는 2개의 선택자 사이에 + 조합자가 들어가는 형태로 구성된다. 이 선택자는 마크업의 순서상 앞에 정의된 선택자 바로 다음에 두 번째 선택자가 놓인 경우를 선택한다. 반드시 두 엘리먼트 모두 동일한 부모를 갖는 구조이어야 한다.아래에 나오는 예제를 보고 참고하자.
h2 + p { font-size : 110%; border-bottom : 1px solid #666; } <h2>Carpeau</h2> <p>Let's share web information!</p> <p>I come back home!</p>
가상클래스(pseudo-classes)와 가상요소(pseudo-elements)를 사용하면 DOM에 정의되지 않은 내용을 기반으로 엘리먼트를 찾아 스타일을 적용할 수 있다. 아래에 나오는 예제를 보고 참고하자.
※가상클래스는 개념적인 관계에 따라 특정 엘리먼트를 선택할 수 있게 해 준다. - 가상클래스 :first-child의 경우 어떤 엘리먼트의 첫 번째 자식 엘리먼트를 지칭한다. div.news p:first-child { font-size : 110%; font-weight : bold; } <div class="news"> <p>We are really pleased that this year d.Construct sold out in...</p> <p>Brighton is a popular little spot and hotels get booked</p> </div>
※가상크래스 중에는 동적인 가상클래스(dynamic pseudo-class)라는 것도 있다. - :focus를 사용하면 엘리먼트에 포커스가 맞춰지는 동안만 스타일이 적용된다. input[type=text]:focus { color : #000; background-color : #ffc; } ※다른 가상클래스 :lang과 같은 언어 가상클래스도 있다. - :lang을 사용하면 사이트 전반에 사용된 언어와는 다르게 특정 언어로 만들어진 컨텐츠 부분에 다른 스타일을 적용할 수 있다. blockquote:lang(de) { padding-right : 30px; background : url(images/de.png) no-repeat right top; } <blockquote lang="de"> <p>Die Webkrauts setzen sich dafur ein...</p> </blockquote> <p>Brighton is a popular little spot and hotels get booked</p>
※가상요소도 마찬가지로 DOM에 정의되지 않은 내용을 기반으로 특정 부분을 찾아서 스타일을 지정할 수 있게 한다. - :first-line은 문단 또는 텍스트의 첫 줄을 지칭한다. 브라우저 창 크기나 글자 크기에 따라서 한 줄에 보이는 글자 수는 달라질 수 있다. p:first-line { font-size : 120%; font-style : italic; } - :first-letter는 엘리먼트의 첫 번째 글자나 숫자를 지칭한다. p.intorduction:first-letter { font-size : 400%; font-weight : bold; }