css selector
기본 셀렉터
전체 셀렉터
전체 셀렉터는 문서의 모든 요소를 선택합니다.
* { }
태그 셀렉터
태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.
h1 { }
div { }
section, h1 { }
ID 셀렉터
ID 셀렉터는 #id로 입력하여 선택합니다.
class 셀렉터
class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다.
attribute 셀렉터
attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다. (모두 암기하실 필요는 없습니다.)
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
자식 / 후손 / 형제 셀렉터
자식 셀렉터
header > p { }
후손 셀렉터
후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다. 아래 예시의 경우 <header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택됩니다. (자식 셀렉터와의 차이점을 반드시 알고 있어야 합니다.)
header p {}
형제 셀렉터
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다. 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택합니다.
section ~ p { }
인접 형제 셀렉터
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다. 예시의 경우 <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 { }정합성이 뭔지 잘모르겠다.
셀렉터 퀴즈 중 헷갈리는 것 정리
- #container .mx-auto {…}
id가 container인 엘리먼트의 후손 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택합니다.
- p:first-child {…}
p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택합니다.
- p:first-of-type {…}
p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다) 형제가 p가 아니어도 됨. p중에 제일 첫 등장. - div:last-of-type {…}
div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택합니다. - p:nth-last-of-type(2) {…}
p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택합니다.
마지막 등장 p 다음에, 마지막에서 두번째 등장 p.