CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector
전체 셀렉터는 문서의 모든 요소를 선택
* { }
태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택, 복수로도 선택할 수 있다.
h1 { }
div { }
section, h1 { }
ID 셀렉터는 #id로 입력하여 선택
#only { }
class 셀렉터는 .class로 입력하여 선택 & 같은 class를 가진 모든 요소를 선택
.widget { }
.center { }
attribute 셀렉터는 같은 속성을 가진 요소를 선택
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
//아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않는다.
header > p { }
<header>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
<p> <!-- 선택 -->
<span>
<p></p>
</span>
</p>
</header>
후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택.
//아래 예시의 경우 <header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택.
header p {}
<header>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
<p><!-- 선택 -->
<span>
<p><!-- !!선택!! -->
</p>
</span>
</p>
</header>
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택.
//아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택합니다.
section ~ p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
//예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택
section + p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택합니다.
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
:first-child { } /*셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.*/
:last-child { } /*셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.*/
:nth-child(n) { } /*셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한
:nth-last-child(n) { } /*셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.*/
/* +a) n은 0부터 시작하는 정수이다. 2n +1 은 홀수를 2n은 짝수를 의미한다. */
:first-of-type /*셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다./*
:last-of-type /*셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.*/
:nth-of-type(n) /*셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.*/
:nth-last-of-type(n) /*셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.*/
:not(셀렉터) /*셀렉터에 해당하지 않는 모든 요소를 선택한다.*/
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
:valid(셀렉터) /*정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.*/
:invalid(셀렉터) /*정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.*/
input[type="text"]:valid { }
input[type="text"]:invalid { }
가상 요소는 특정 부분에 스타일을 적용하기 위하여 사용된다. 특정부분이란 예를 들어
가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
::first-letter /*콘텐츠의 첫글자를 선택한다.*/
::first-line /*콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.*/
::after /*콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.*/
::before /*콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.*/
::selection /*드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.*/