🔍 CSS Selector

👀 기본 셀렉터

✔ 전체 셀렉터

*{ } : 문서의 모든 요소를 선택

/* border-box 예시 */
* {
  box-sizing: border-box;
}

✔ 태그 셀렉터(그룹 셀렉터)

tag { }: 같은 태그명을 가진 모든 요소 선택(복수 선택 가능)

h1 { }
div { }

section, h1 { }

✔ id 셀렉터

#id{ } : 해당 id를 가진 요소를 선택

✔ class 셀렉터

.class{ } : 같은 class를 가진 모든 요소를 선택

<문서 분할 후 , id class selector 링크걸기>

✔ attribute 셀렉터

tag[attribute] { } : 같은 속성을 가진 요소를 선택

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

👀 자식/후손/형제 셀렉터

✔ 자식 셀렉터

요소 > 아래 요소 { }:첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택

Example) <header>바로 아래에 있는 두 개의 p는 선택되지만 <span>의 자식인 p는 선택되지 않는다.

header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

✔ 후손 셀렉터

요소 요소 { }:첫 번째로 입력한 요소의 후손을 선택.

Example) <header>의 자식인 <p>뿐만 아니라 <span>의 자식인 <p>까지 모두 선택

header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>

✔ 형제 셀렉터

요소 ~ 요소 { }: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

Example) <section>뒤에 있는 3개의<p> 모두 선택

section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

✔ 인접 형제 셀렉터

요소 + 요소 { }: 같은 부모를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택

Example) <section>뒤에 있는 3개의 <p>중 첫 번째 <p> 선택

section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

👀 기타 셀렉터

선택자:의사클래스이름 {속성: 속성값;}

✔ 가상 클래스 셀렉터(dynamic pseudo-classes)

요소의 상태 정보에 기반해 요소를 선택

a:link { }    /* 사용자가 방문하지 않은 <a>요소를 선택 */
a:visited { } /* 사용자가 방문한 <a>요소를 선택. */
a:hover { }   /* 마우스를 <a>요소 위에 올렸을 때 선택 */
a:active { }  /* <a>요소가 클릭된 상태일 때 선택 */
a:focus { }   /* <a>요소에 포커스가 들어와 있을 때 선택 */

✔ UI 요소 상태 셀렉터(UI element states pseudo-classes)

input:checked + span { }  /*<input>요소 중에서 체크 상태의 <input>요소를 선택 */
input:enabled + span { }  /*사용 가능한 상태일 때 선택 */
input:disabled + span { } /*사용 불가능한 상태일 때 선택 */

✔ 구조 가상 클래스 셀렉터(structural pseudo-classes)

p:first-child { }                      /* p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택*/
ul > li:last-child { }                 /* ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택 */
ul > li:nth-child(n) { }               /* ul의 자식 엘리먼트 중에서, n번째 자식 엘리먼트가 li인 것을 선택*/
section > p:nth-child(2n+1) { }        /* section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택 */
ul > li:first-child { }                /* ul의 자식 엘리먼트 중에서, 첫번째 자식 엘리먼트가 li인 것을 선택 */
li:last-child { }                      /* li 엘리먼트 중 마지막 자식 엘리먼트를 선택 */
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 엘리먼트를 선택 */
ul:nth-of-type(2) { }                  /* p 엘리먼트의 형제 엘리먼트 중 두 번째 p 엘리먼트를 선택 */
p:nth-last-of-type(1) { }              /* p 엘리먼트의 형제 엘리먼트 중 마지막에서 첫 번째 p 엘리먼트를 선택 */

✔ 부정 셀렉터

input:not([type="password"]) { }       /* p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택 */
div:not(:nth-of-type(2)) { }           /* div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택 */

✔ 정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

Reference: 코드스테이츠