[CSS] 선택자

https://jsfiddle.net/Kimara/b7s0qvyy/13/

동위 선택자(sibling selector)

동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 

동위 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미합니다.

이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 합니다.

일반 동위 선택자(general sibling selector)

일반 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 

다음 예제는 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택하는 예제입니다.

  예제 :  div ~ p {스타일;}

인접 동위 선택자(adjacent sibling selector)

영어로 adjacent는 인접한, 가까운 이라는 의미가 있습니다.

인접 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다. 

다음 예제는 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택하는 예제입니다.

  예제 : div + p {스타일;}

************************************************************************************************************

의사 클래스(pseudo-class)

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다.

---

의사 클래스의 문법

의사 클래스(pseudo-class)를 사용하기 위한 문법은 다음과 같습니다.

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

클래스(class)나 아이디(id)에도 의사 클래스(pseudo-class)를 사용할 수 있습니다.

  문법

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

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

의사 클래스(pseudo-class)의 이름은 대소문자를 구분하지 않습니다.

---

대표적인 CSS 의사 클래스

CSS에서 자주 사용하는 대표적인 의사 클래스는 다음과 같습니다.

1. 동적 의사 클래스(dynamic pseudo-classes)

의사 클래스	설명
:link	사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택함. (기본 상태)
:visited	사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택함.
:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택함.
:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 선택함.
:focus	포커스를 가지고 있는 input 요소를 모두 선택함.

:hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

2. 상태 의사 클래스(UI element states pseudo-classes)

의사 클래스	설명
:checked	체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled	사용할 수 있는 input 요소를 모두 선택함.
:disabled	사용할 수 없는 input 요소를 모두 선택함.

:enabled는 input 요소 중에서 사용할 수 있는 input 요소를 선택합니다.

또한, :disabled는 input 요소 중에서 사용할 수 없는 input 요소를 선택합니다.

3. 구조 의사 클래스(structural pseudo-classes)

의사 클래스	설명
:first-child	모든 자식(child) 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 모두 선택함.
:last-child	모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type	모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함.
:last-of-type	모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-of-type	모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-last-of-type	모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:only-child	자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선택함.
:only-of-type	자식(child)  요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택함.
:empty	자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택함.
:root	문서의 root 요소를 선택함.

4. 기타 의사 클래스

- :not

- :lang

---

CSS 의사 클래스(pseudo classes)

의사 클래스	설명
:link	사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
:visited	사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:focus	초점이 맞춰진 input 요소를 모두 선택함.
:checked	체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled	사용할 수 있는 input 요소를 모두 선택함.
:disabled	사용할 수 없는 input 요소를 모두 선택함.
:target	현재 활성화된 target 요소를 모두 선택함.
:in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
:read-only	readonly 속성을 가지는 input 요소를 모두 선택함.
:read-write	readonly 속성을 가지지 않는 input 요소를 모두 선택함.
:required	required 속성을 가지는 input 요소를 모두 선택함.
:optional	required 속성을 가지지 않는 input 요소를 모두 선택함.
:valid	유효한 값을 가지는 input 요소를 모두 선택함.
:invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함.
:first-child	모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
:last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type	모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.
:last-of-type	모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.
:nth-of-type	모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
:nth-last-of-type	모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
:only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type	자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
:root	문서의 root 요소를 선택함.
:not(선택자)	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
:lang(언어)	특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.