https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS 선택자

CSS 선택자는 CSS 규칙을 적용할 요소를 정의한다.

참고: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않는다.

기본 선택자

전체 선택자

모든 요소를 선택한다. *은 문서 내의 모든 요소와 일치한다.

유형(타입,태그,요소) 선택자

주어진 노드 이름을 가진 모든 요소를 선택한다.

• 구문: elementname
• 예제: input은 모든 <input> 요소와 일치한다.

클래스 선택자

주어진 class 특성을 가진 모든 요소를 선택한다.
즉, 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있다. 재사용성이 높다.

• 구문: .classname
• 예제: .index는 "index" 클래스를 가진 모든 요소와 일치한다.

ID 선택자

id 특성에 따라 요소를 선택한다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 한다.

• 구문: #idname
• 예제: #toc는 "toc" ID를 가진 요소와 일치한다.

특성 선택자

주어진 특성을 가진 모든 요소를 선택한다.

• 구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
• 예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않는다.

그룹 선택자

선택자 목록

,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택한다.

• 구문: A, B
• 예제: div, span은 모든 <span>과 <div> 요소와 일치한다.

결합자

자손(하위) 결합자

""(공백) 결합자는 자식, 자손 모두를 선택한다.

• 구문: A B
• 예제: div span은 <div> 요소 안에 위치하는 모든 <span> 요소와 일치한다.

자식 결합자

> 결합자는 바로 아래 자식을 선택한다.

• 구문: A > B
• 예제: ul > li는 <ul> 요소 바로 아래에 위치하는 모든 <li> 요소와 일치한다.

일반 형제 결합자

~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소부터 쭉 선택한다.

• 구문: A ~ B
• 예제: p ~ span은 <p> 요소를 뒤따르는 모든 <span> 요소와 일치한다.

인접 형제 결합자

결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소만 선택한다.

• 구문: A + B
• 예제: h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치한다.

의사(가상) 클래스/요소

의사 클래스

의사 :은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있다.

• 구문 : a:link(방문하지 않은 링크), a:visited(방문한 링크), a:hover(마우스 커서를 올려 놨을때), a:active(마우스로 클릭했을때), a:focus(포커스 되었을 때) 등등..
• 예제: a:visited는 사용자가 방문한 모든 <a> 요소와 일치한다.

의사 요소

의사 ::는 HTML이 포함하지 않는 개체를 선택합니다.

• 예제: p::first-line은 모든 <p> 요소의 첫 번째 줄과 일치합니다.