(TIL) CSS Selector

in63119·2020년 11월 5일
0

TIL

목록 보기
4/27

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 요소를 선택한다.

0개의 댓글