CSS 이론 채워 넣기 - 1. 셀렉터(Selector)

1. 기본적인 셀렉터 종류

전체 셀렉터 (Universal Selector)

 * { color: red; }

태그 셀렉터 (Type Selector)

 p { color: red; }

ID 셀렉터 (ID Selector)

#p1 { color: red; }

클래스 셀렉터 (Class Selector)

.container { color: red; }

2. 어트리뷰트 셀렉터 (Attribute Selector)

패턴	설명	예시
셀렉터[어트리뷰트]	지정된 값을 갖는 모든 요소를 선택한다.	a[href] { color: red; }
셀렉터[어트리뷰트="값"]	지정된 값이 일치하는 모든 요소를 선택한다.	a[target="_blank"] { color: red; }
셀렉터[어트리뷰트~="값"]	지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다.	h1[title~="first"] { color: red; }
셀렉터[어트리뷰트 | ="값"]	지정된 값과 일치하거나 지정 값 뒤 연이은 하이픈("값-")으로 시작하는 요소를 선택한다.	p[lang|="en"] { color: red; }
셀렉터[어트리뷰트^="값"]	지정된 값으로 시작하는 요소를 선택한다.	a[href^="https://"] { color: red; }
셀렉터[어트리뷰트$="값"]	지정된 값으로 끝나는 요소를 선택한다.	a[href$=".html"] { color: red; }
셀렉터[어트리뷰트*="값"]	지정된 값을 포함하는 요소를 선택한다.	div[class*="test"] { color: red; }

3. 복합 셀렉터 (Combinator)

1 level 하위에 속하는 요소를 자손 요소(자식 요소)라하며 자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.

종류	설명	예시
후손 셀렉터 (Descendant Combinator)	셀렉터A의 모든 후손(하위) 요소 중 셀렉터B와 일치하 는 요소를 선택한다.	div p { color: red; }
자식 셀렉터 (Child Combinator)	셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.	div > p { color: red; }
인접 형제 셀렉터 (Adjacent Sibling Combinator)	셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.	p + ul { color: red; }
일반 형제 셀렉터 (General Sibling Combinator)	셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.	p ~ ul { color: red; }

※ 형제(동위) 셀렉터는 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용한다.

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

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.

• 마우스가 올라와 있을때
• 링크를 방문했을 때와 아직 방문하지 않았을 때
• 포커스가 들어와 있을 때

가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

4.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)

종류	설명
링크:link	셀렉터가 방문하지 않은 링크일 때
링크:visited	셀렉터가 방문한 링크일 때
링크:hover	셀렉터에 마우스가 올라와 있을 때
링크:active	셀렉터가 클릭된 상태일 때
링크:focus	셀렉터에 포커스가 들어와 있을 때

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

종류	설명
UI 요소:checked	셀렉터가 체크 상태일 때
UI 요소:enabled	셀렉터가 사용 가능한 상태일 때
UI 요소:disabled	셀렉터가 사용 불가능한 상태일 때

4.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)

-child 형식

셀렉터의 부모 요소의 자식 요소들 중 하나의 선택을 의미하는 가상 클래스 셀렉터이다.

※ 단순히 자식 요소 중 하나를 선택하는 방식이므로 셀렉터의 요소와 매치되는 요소가 없다면 해당 내용이 적용되지 않는다.

종류	설명
:first-child	부모 요소의 자식 요소들 중 첫 번째 자식인 요소를 선택한다.
:last-child	부모 요소의 자식 요소들 중 마지막 자식인 요소를 선택한다.
:nth-child(n)	부모 요소의 자식 요소들 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n)	부모 요소의 자식 요소들 중 뒤에서 n번째 자식인 요소를 선택한다.

-of-type 형식

셀렉터의 부모 요소의 자식 요소 중 해당 타입의 요소들 중 하나의 선택을 의미하는 가상 클래스 셀렉터이다.

-child 형식과 마찬가지로 해당 타입의 자식 요소와 매치되는 요소가 없다면 해당 내용이 적용되지 않는다.

종류	설명
:first-of-type	해당 타입의 첫 번째 요소를 나타낸다.
:last-of-type	해당 타입의 마지막 요소를 나타낸다.
:nth-of-type(n)	해당 타입의 앞에서 n 번째 요소를 나타낸다.
:nth-last-of-type(n)	해당 타입의 뒤에서 n 번째 요소를 나타낸다.

4.4 부정 셀렉터(Negation pseudo-class)

:not( 셀렉터 ): 괄호안에 셀렉터의 해당하지 않는 모든 요소를 선택한다.

input:not([type=password])  {  background:  yellow;  }

4.5 정합성 체크 셀렉터(validity pseudo-class)

종류	설명
:valid(셀렉터)	정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터)	정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

5. 가상 요소 셀렉터 (Pseudo-Element Selector)

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용하며 가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

종류	설명
::first-letter	콘텐츠의 첫글자를 선택한다.
::first-line	콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after	콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before	콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection	드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.

참고

https://poiemaweb.com/css3-selector