속성선택자

단순 속성으로 선택

p[class] { color: silver; } 
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다.

p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다.

두 규칙 모두 속성의 값은 상관하지 않습니다.

정확한 속성값으로 선택

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

p[class="foo"]는 < p >이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 < p > 이면서 id 속성의 값이 title이면 적용됩니다.

부분 속성값으로 선택

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

문서 구조 관련 선택자

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.

이 선택자는 < div >의 자손 요소인 < span >를 선택하는 선택자 입니다.

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.

이 선택자는 < div >의 자식 요소인 < h1 >를 선택하는 선택자 입니다.

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.

인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다.

위 코드에서는 div와 바로 인접해있는 p태그를 선택한것 입니다.

가상 클래스 선택자

문서 구조와 관련된 가상 클래스

:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택

앵커 요소와 관련된 가상 클래스

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미

가상 요소 선택자

:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트 (브라우저 화면 기준)
:first-letter : 블록 레벨 요소의 첫 번째 문자