[CSS] 선택자 (selector)

HTML element(요소)에 스타일을 부여하기 위해 선택자, 셀렉터(Selector) 라는 것을 사용한다. 즉, style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

기본적으로, CSS에서는 여러 개의 셀렉터를 연속하여 지정할 수도 있으며, 이 때는 쉼표(,)로 구분한다.

body, h1 {
	margin: unset;
}

1. 전체 셀렉터 (Universal Selector)

형태	설명
*	HTML 문서 내의 (html 요소를 포함한) 모든 요소를 선택한다.

* {
	color: red;
}

2. 타입 셀렉터 (Type Selector)

형태	설명
태그 이름	HTML 문서 내에서 지정된 태그 명을 가진 모든 요소를 선택한다.

div {
	background-color: red;
}

3. 클래스 셀렉터 (Class Selector)

---

중요) 클래스 작명 시 주의사항

지금까지의 나도 그렇고, 보통 클래스의 이름을 지을 때 컨텐츠의 내용에 따라 짓는 경우가 대부분이다. 예를 들어, information 이라는 내용을 가진 section 의 경우 클래스를 다음과 같이 짓는 것이다.

<section class="information">
	/* */
</section>

그러나, 내부에 있는 컨텐츠는 고객의 요구에 따라 언제든 달라질 수 있다는 것을 명심할 필요가 있을 것이다. 따라서 컨텐츠에 따라 클래스 이름을 짓는 것보다는 일반적인 작명(요소의 기능 등)을 하는 것이 좋을 것이다.

또한 클래스 작명 시 "클래스 이름은 숫자로 시작할 수 없다.", <section class="a"></section> 처럼 너무 짧은 문자나 이름보다는 의미를 알 수 있는 이름으로 작성해야 한다는 점에 유의해야한다.

---

형태	설명
.클래스 이름	HTML 문서 내에서 class 속성을 지정하고 (중복 가능), 지정된 클래스 명을 가진 모든 요소를 선택한다.

다음 세 가지 모두 가능하며, 상황에 따라 다르게 사용한다.

*.클래스명 과 .클래스명은 완전히 동일하고, .클래스명 의 ' . ' 앞에 ' * ' 가 생략된 형태라고 볼 수 있다.

div.header {
	background-color: red;
}

*.header {
	background-color: red;
}

.header {
	background-color: red;
}

4. 복합 셀렉터 (feat. Combinator)

결합자, 조합자(Combinator)는 하나 이상의 셀렉터를 조합하여 새로운 대상을 지정, 스타일링하기 위해 사용한다. ' ', '>', '+', '~' 등 수많은 결합자들이 있다. 이러한 결합자들을 이용해서 만들어진 새로운 선택자를 복합 셀렉터라고 한다.

1) 하위(자손) 셀렉터 (Descendant Selector)

.header h1 {

}

하위 셀렉터는 셀렉터 A의 모든 하위 요소 중 셀렉터 B와 일치하는 요소를 선택한다.

2) 자식 셀렉터 (Child Selector)

.header > h1 {

}

자식 셀렉터는 셀렉터 A의 모든 자식 요소 중 셀렉터 B와 일치하는 요소를 선택한다.

3) 인접 형제 셀렉터 (Adjacent Sibling Selector)

.header + h1 {

}

인접 형제 셀렉터는 셀렉터 A 바로 뒤에 오는 셀렉터 B를 하나 선택한다.

4) 일반 형제 셀렉터 (General Sibling Selector)

.header ~ h1 {

}

일반 형제 셀렉터는 셀렉터 A 뒤에 나오는 모든 셀렉터 B를 선택한다.

5. 가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스 셀렉터는 셀렉터에 추가하는 키워드로, html 마크업에 직접 작성하지 않아 실제로는 존재하지 않지만 선택한 요소가 특별한 상태를 만족할 때 클래스가 있는 것처럼 작동하는 셀렉터이다. 예를 들어, 어떠한 요소에 마우스 포인터를 올렸을 때(mouseover) 효과를 주고 싶은 경우 사용할 수 있다.

가상 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리(:visited 등), 콘텐츠의 상태(특정 폼 요소에 적용한 :checked 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있다.

가상 클래스 셀렉터는 다음과 같이 기존에 존재하는 셀렉터 뒤에 ```:가상클래스``` 를 붙여서 사용한다.

.button:hover {
	color: blue;
}

주요 가상 클래스

아직 가상 클래스에 대해 자세히 공부하지는 않았지만, 그 동안 공부, 작업하면서 마주했던 주요 가상 클래스들에 mdn에서 찾아 정리해 보았다.

가상 클래스	적용 방법
:active	사용자가 활성화한 요소(버튼 등)를 나타낸다. 마우스를 사용하는 경우, 마우스 버튼을 누르는 순간부터 떼는 순간까지를 의미한다.
:checked	사용자가 선택했거나 on 상태인 라디오(<input type="radio"> ), 체크박스(<input type="checkbox">), 옵션(<option>) 요소를 나타낸다.
:disabled	모든 비활성 요소를 나타낸다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 의미한다.
:enabled	모든 활성 요소를 나타낸다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 의미한다.
:first-child	형제 요소 중 제일 첫 요소를 나타낸다.
:focus	양식의 입력 칸 등 포커스를 받은 요소를 나타낸다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 [Tab] 키로 선택했을 때 적용된다.
:hover	사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
:last-child	형제 요소 중 제일 마지막 요소를 나타낸다.
:link	아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a>, <area>, <link> 중 방문하지 않은 모든 요소를 선택한다.
:nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다. 인덱스는 1부터 시작하며, 다양한 표기 방법이 있지만 자세한 사항은 따로 다뤄볼 예정이다. 예) li:nth-chlid(2) { color: red; } : 목록의 두 번째 <li>를 선택
:visited	사용자가 방문한 적이 있는 링크를 나타낸다. :visited 가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적이다.