[CSS - 2] 선택자 (Selector)

1. 기본 셀렉터

전체 셀렉터

전체 셀렉터는 문서의 모든 요소를 선택합니다.

* { }

태그 셀렉터

태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.

h1 { }
div { }
div, h1 { }
div, h1, h2, b { }

ID 셀렉터

ID 셀렉터는 #id로 입력하여 선택합니다.

#only { }
#coper { }

class 셀렉터

class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다.

.widget { }
.center { }

attribute 셀렉터

attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다.

a[href] { } 
/* 지정된 어트리뷰트를 갖는 모든 요소를 선택한다. */

p[id="only"] { } 
/* 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다. */

p[class~="out"] { } 
/* 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다. */

p[class|="out"] { } 
/* 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다. */

section[id^="sect"] { } 
/* 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다. */

div[class$="2"] { } 
/* 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다. */

div[class*="w"] { } 
/* 지정된 어트리뷰트 값을 포함하는 요소를 선택한다. */

2. 자식 / 후손 / 형제 셀렉터

자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않습니다. (마찬가지로 후손 셀렉터와의 차이를 반드시 알고 있어야 합니다.)

header > p { }

후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다. 아래 예시의 경우 <header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택됩니다. (자식 셀렉터와의 차이점을 반드시 알고 있어야 합니다.)

header p {}

형제 셀렉터

셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

셀렉터A ~ 셀렉터B { }

인접 형제 셀렉터

셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.

셀렉터A + 셀렉터B { }

3. 가상 클래스 셀렉터

링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

:link	셀렉터가 방문하지 않은 링크일 때
:visited	셀렉터가 방문한 링크일 때
:hover	셀렉터에 마우스가 올라와 있을 때
:active	셀렉터가 클릭된 상태일 때
:focus	셀렉터에 포커스가 들어와 있을 때

UI 요소 상태 셀렉터

:checked	셀렉터가 체크 상태일 때
:enabled	셀렉터가 사용 가능한 상태일 때
:disabled	셀렉터가 사용 불가능한 상태일 때

구조 가상 클래스 셀렉터

밑에 있는 모든 것들을 하나씩 해독 해보자. 너무 중요하다.

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 요소 또는 form 요소를 선택한다. */

input[type="text"]:invalid { }
/* 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다. */

Selector game

다음 링크는 셀렉터 게임을 할 수 있다! HTML 코드를 보고 테이블에 움직이는 것들 CSS로 선택해주면 된다.

https://flukeout.github.io/#

CSS Diner