- 다양한 CSS selector 규칙을 이해한다.
- 후손 selector와 자식 selector의 차이를 이해한다.
- 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.
* { }
전체 셀렉터는 문서의 모든 요소를 선택
h1 { } div { } section, h1 { }
태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택. 복수로도 선택可
ID 셀렉터는 #id로 입력하여 선택
class 셀렉터는 .class로 입력하여 선택.
같은 class를 가진 모든 요소를 선택하게 됨.
attribute 셀렉터는 같은 속성을 가진 요소를 선택 (암기 필요x)
a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }
첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
header > p { }
<header> <p> <!-- 선택 --> <span> <p></p> </span> </p> <p> <!-- 선택 --> <span> <p></p> </span> </p> </header>
첫 번째로 입력한 요소의 후손을 선택
요소의 자식인 요소뿐 아니라, 자식의 자식인 요소까지 모두 선택
header p {}
🚨주의🚨: 위 둘의 차이를 반드시 알고 있어야 함!<header> <p><!-- 선택 --> <span> <p><!-- !!선택!! --> </p> </span> </p> <p><!-- 선택 --> <span> <p><!-- !!선택!! --> </p> </span> </p> </header>
부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
section ~ p { }
<header> <section></section> <p></p> <!-- 선택 --> <p></p> <!-- 선택 --> <p></p> <!-- 선택 --> </header>
같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
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 { } /*사용 불가능한 상태일 때 선택합니다. */
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 { }