20.11.5
오늘은 CSS Selector에 대해 공부했다.
JS에서 각 함수를 선언할때 CSS는 각 요소를 선택한다.
처음 HTML을 보았을 때 CSS의 선택자들이 무슨 역할을 할지 궁금했는데
비로소 알게되었다!
오늘의 TIL은 내가 까먹지 않게 CSS Selector들을 저장해놔야겠다.
셀렉터
• h1 { } -> 모든 h1을 선택한다.
• div { } -> 모든 div를 선택한다.
전체 셀렉터
• * { } -> 모든 엘리먼트를 선택한다.
Tag 셀렉터
• section, h1 { } -> 쉼표(,)는 section과 h1를 다중으로 선택한다.
ID 셀렉터
• #only { } -> id가 only인 엘리먼트를 선택한다.
Class 셀렉터
• .widget { } -> class가 widget인 엘리먼트를 선택한다.
• .center { } -> class가 center인 엘리먼트를 선택한다.
attribute 셀렉터
• p[id="only"] { } -> p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트를 선택다.
• p[class~="out"] { } -> class의 속성 값이 “out”(띄어쓰기 별로 구분)을 포함한 p 요소를 선택한다.
• p[class|="out"] { } -> class의 속성 값이 out 이거나 out- 로 시작하는 p 요소를 선택한다. (Outpius 는 안 됨)
• section[id^="sect"] { } -> id 속성 값이 sect로 시작하는 section 요소를 선택한다.
• div[class$="2"] { } -> class의 속성 값이 2 로 끝나는 div요소를 선택한다.
• div[class*="w"] { } -> class의 속성 값이 w 가 들어가면 선택한다.
후손 셀렉터
• header h1 {} -> header 안에 h1을 선택한다.
자식 셀렉터
• header > p { } -> >는 header의 자식 엘리먼트 p를 선택한다.
인접 형제 셀렉터
• section + p { } -> +는 article과 인접한 형제 엘리먼트 p 를 선택한다.
형제 셀렉터
• section ~ p { } -> ~는 section과 인접한 형제 엘리먼트 p를 모두 선택한다.
가상 클래스
• a:link { } -> a 요소에 방문한 적이 없는 링크
• a:visited { } -> a 요소에 방문한 적이 있는 링크
• a:hover { } -> a 요소에 마우스를 올린 상태를 선택한다.
• a:active { } -> a 요소에 마우스를 클릭했을 때
• a:focus { } -> a 요소에 포커스 되었을 때 (input 태그 등)
요소 상태 셀렉터
• :checked - 셀렉터가 체크 상태일 때
• :enabled - 셀렉터가 사용 가능한 상태일 때
• :disabled - 셀렉터가 사용 불가능한 상태일 때
구조 가상 클래스 셀렉터
• p:first-child { } -> :first-child는 p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택한다.
• ul > li:last-child { } -> ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택한다.
• ul > li:nth-child(3) { } -> ul의 자식 엘리먼트 중에서, 세 번째 자식 엘리먼트가 li인 것을 선택한다.
• section > p:nth-child(2n+1) { } -> section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택한다.
• footer > div:first-child { } -> footer의 자식 엘리먼트 중에서, 첫 번째 자식 엘리먼트가 div인 것을 선택한다.
• div:last-child { } -> div 엘리먼트 중 마지막 자식 엘리먼트를 선택한다.
• div > div:nth-child(4) { } -> div의 자식 엘리먼트 중에서, 네 번째 자식 엘리먼트가 div인 것을 선택힌다.
• div:nth-last-child(2) { } -> div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택한다.
• section > p:nth-last-child(2n + 1) { } -> section의 자식 엘리먼트 중에서, 마지막에서 홀수 번째 자식 엘리먼트가 p인 것을 선택한다.
• p:first-of-type { } -> p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택한다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택한다)
• div:last-of-type { } -> div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택한다.
• p:nth-of-type(2) { } -> p 엘리먼트의 형제 엘리먼트 중 두 번째 p 엘리먼트를 선택한다.
• p:nth-last-of-type(2) { } -> p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택한다.
부정 셀렉터
• p:not(#only) { } -> p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택한다.
• div:not(:nth-of-type(2)) { } -> div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택한다.
정합성 셀렉터
• :valid - 정합성 검증이 성공한 input 요소 또는 from 요소를 선택한다.
• :invalid - 정합성 검증이 실패한 input 요소 또는 from 요소를 선택한다.
