[CSS] 선택자 총 정리

📝 총 정리라고는 했지만 많이 쓰이는 선택자만 쏙쏙 골라 정리해 보았습니다!

📌 후손선택자 | 자손선택자

• 후손선택자: 선택자 태그 바로 아래에 위치한 모든 태그

#select h1 { color: #fff; }

띄어쓰기를 하면(#select .login) = select태그 밑에(감싸고) 있는 login 태그

띄어쓰기를 안 하면(#select.login) = select태그 안에 있는 login

• 자손선택자: 선택자 태그 바로 한 단계 아래(서열상 첫 번째)에 위치한 태그

#select > h1 { color: #fff; }

---

📌 구조선택자 종류

형태구조 선택자

#select h1:first-of-type{ color: #fff; } /* h1 태그 중 첫 번째 */
#select h1:last-of-type{ color: #fff; } /* h1 태그 중 마지막 번째 */
#select h1:nth-of-type(2){ color: #fff; } /* h1 태그 중 앞에서 2번째 */
#select h1:nth-last-of-type(3){ color: #fff; } /* h1 태그 중 뒤에서 2번째 */

일반구조 선택자와 형태구조 선택자의 차이

#select p:nth-child(3){color: red; font-weight: bold;} /* 일반구조 선택자 */
#select p:nth-of-type(3){color: green; font-weight: bold;} /* 형태구조 선택자 */

일반구조 선택자는, 부모요소의 모든 자식요소를 대상으로 n번째 자식을 선택하고
형태구조 선택자는, 부모요소의 특정 요소만을 대상으로 n번째 자식을 선택한다.

즉,

일반구조 선택자) 중간에 있는 요소들까지 포함해서 n번째 자식 선택
형태구조 선택자) 선택된 태그(ex. < p >) 중에서 n번째 자식 선택

---

📌 문자선택자

:after | 태그 뒤에 위치한 공간을 선택
:before | 태그 앞에 위치한 공간을 선택

.box:after{content:"box의 맨뒤에 문장을 삽입한다."; color: orange;}
.box:before{content:"box의 맨앞에 문장을 삽입한다."; color: green;}

---

📌 반응선택자

:active | 사용자가 마우스로 클릭한 태그를 선택
:hover | 사용자가 마우스를 올린 태그를 선택

---

📌 상태선택자

:checked | 체크 상태의 input 태그를 선택
:focus | 초점이 맞추어진 input 태그를 선택

---

📌 기본속성 선택자(form 태그)

: 특정한 속성이 있는 태그를 선택

input[type=text]{background-color:red; width: 100px;}
input[type=password]{background-color: blue; width: 300px;}

---

📚 Reference

: 국비지원 수업