학습 목표
- 다양한 CSS selector 규칙을 이해한다.
- 후손 selector와 자식 selector의 차이를 이해한다.
- 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.
CSS 속성을 적용할 대상을 선택하는 방법을 CSS Selector라고 한다.
전체 셀렉터
* { }
태그 셀렉터
h1 { }
div { }
section, h1 { }
ID 셀렉터
#id
로 입력하여 선택#only { }
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>
요소 바로 아래에 있는 두 개의 <div>
요소는 선택되지만, <p>
요소의 자식인 <div>
요소는 선택되지 않음
* 후손 셀렉터와의 차이를 반드시 알고 있어야 함
header > div { }
예시)
<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>
후손 셀렉터
첫 번째로 입력한 요소의 후손 선택
예를 들면, 아래의 <header>
요소의 자식인 <div>
요소뿐 아니라, <p>
요소의 자식인 <div>
요소까지 모두 선택
* 자식 셀렉터와의 차이점을 반드시 알고 있어야 함
header div {}
예시)
<header>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
</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 { } /* 포커스가 들어와 있을 때 선택합니다. */
UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }