2. 선택자

#1. 선택자 공부 팁

선택자의 종류도 많고, 포함관계 등을 따지면 더 복잡하다. 

#1-1. 선택자 공부/연습할 수 있는 사이트 : https://flukeout.github.io

CSS Diner

: 테이블 안의 음식 중 특정한 것을 고르는 게임? 퀘스트?인데, 그 과정에서 CSS 선택자의 종류와 여러 관계를 학습할 수 있다.

 

 

1. Sibling Selector

1) Adjacent Sibling Selector

A + B

: A와 B가 동일한 level이고(<ul>과 <ol>처럼) A 태그 바로 다음에 B 태그가 언급될 때, B는 A의 adjacent sibling selector이다.

-A 바로 다음에 B가 올 때만 해당

-A 바로 다음에 오는 선택자 하나만 해당

 

2) General Sibling Selector

A ~ B

: A와 B가 동일한 level이고 A 태그 다음에 B 태그가 언급될 때, B는 A의 general sibling selector이다.

-A 바로 다음이 아니어도 A 뒤에 있는 선택자면 모두 해당

-선택자 여러 개 해당

 

 

2. Parent-Child

1-1) Descendant Selector

A  B

: A 선택자 안에 포함된 모든 B 선택자를 선택

-A 선택자 바로 안에 포함된 선택자(direct child)가 아니어도 적용됨

 

1-2) Child Selector

A>B

: A 선택자 바로 안에 포함된 B선택자만 선택

-B 선택자가 A 선택자의 direct child 일 때만 적용됨

 

2) First Child Pseudo Selector

(first-child : 부모 선택자에서 첫 번째로 작성된 자식 선택자를 의미)

:first-child  : 모든 부모 선택자에서 first-child element 선택

A:first-child  : A라는 선택자 안에 포함된 first-child element 선택

A  B:first-child  : A 선택자 안에 포함된 B 선택자 안에 포함된 first-child element 선택

+) A>B:first-child  : A 선택자의 direct child인 B 선택자 안에 포함된 first-child element 선택

 

3) Only Child Pseudo Selector

(only-child : 부모 선택자가 단 하나의 자식 선택자를 가질 때 그 자식을 only child라고 함)

:only-child : 모든 부모 선택자에서 only-child element 선택

A:only-child : A라는 선택자 안에 포함된 only-child element 선택

A  B:only-child : A 선택자 안에 포함된 B 선택자 안에 포함된 only-child element 선택

+) A>B:only-child : A 선택자의 direct child인 B 선택자 안에 포함된 only-child element 선택

 

4) Last Child Pseudo Selector

(last-child : 부모 선택자에서 마지막으로 작성된 자식 선택자를 의미)
:last-child : 모든 부모 선택자에서 last-child element 선택

A:last-child : A라는 선택자 안에 포함된 last-child element 선택

A  B:last-child : A 선택자 안에 포함된 B 선택자 안에 포함된 last-child element 선택

+) A>B:last-child  : A 선택자의 direct child인 B 선택자 안에 포함된 last-child element 선택

 

* first-child , only-child , last-child 는 서로 배타적인 관계가 아니다!

= first-child 이면서 only-child 이면서 last-child 일 수도 있다.

ex) 부모 선택자가 하나의 자식 선택자만 가질 때.

 

+ 선택자가 너무 복잡해서 first-child , only-child , last-child 만으로 표현할 수 없을 때 사용하는 선택자:

5) Nth Child Pseudo-Selector

(nth-child : 부모 선택자에서 n번째로 작성된 자식 선택자를 의미)

:nth-child(a)  : 모든 부모 선택자를 대상으로 a번째 자식 선택자를 선택

A:nth-child(a)  : A라는 부모 선택자를 대상으로 a번째 자식 선택자를 선택

+) A  B 나 A>B 등의 부모-자식 관계를 앞에 적용하는 것도 물론 가능

- 앞에서부터 세는 방식

 

6) Nth Last Child Selector

(nth-last-child : 부모 선택자에서 뒤에서부터 셌을 때 n번째에 있는 자식선택자를 의미)
:nth-last-child(a)  : 모든 부모 선택자를 대상으로 끝에서 a번째 있는 자식 선택자를 의미

+) A  B 나 A>B 등의 부모-자식 관계를 앞에 적용하는 것도 물론 가능

- 뒤에서부터 세는 방식

 

 

3. Type

type : 어떤 태그나 선택자의 종류를 지정할 때 사용

* Type 역시 first, only, last, nth 등으로 종류를 지정한다.

 

1) First of Type Selector

:first-of-type  : 선택자의 종류 상관없이, 같은 선택자 중에서 첫 번째로 제시된 선택자를 의미

A:first-of-type  : A라는 선택자 중에서 첫 번째로 제시된 선택자를 의미

+ 부모-자식관계 적용 가능

 

2) Only of Type Selector

:only-of-type : 같은 선택자인 요소가 없는 경우. 자신만이 해당 선택자일 경우 그 element를 의미

A:only-of-type : A라는 선택자 종류인 유일한 element를 의미

+ 부모-자식관계 적용 가능

 

3) Last of Type Selector

:last-of-type : 선택자의 종류 상관없이, 같은 선택자 중에서 마지막으로 제시된 선택자를 의미

A:last-of-type : A라는 선택자 중에서 마지막으로 제시된 선택자를 의미

+ 부모-자식관계 적용 가능

 

4) Nth of Type Selector

:nth-of-type(a) : 선택자의 종류 상관없이, 같은 선택자 중에서 a번째로 제시된 선택자를 의미

A:nth-of-type(a) : A라는 선택자 중에서 a번째로 제시된 선택자를 의미

A:nth-of-type(odd) : A라는 선택자 중에서 홀수 번째로 제시된 선택자를 의미

+ 부모-자식관계 적용 가능

 

4-1) Nth of Type Selector with Formula

A:nth-of-type(an+b) : A라는 선택자 중에서 b번째부터 시작해서, 매 a번째 element를 의미

ex) li:nth-of-type(3n+2) : <li> 태그 선택자 중에서 2번째부터 시작해서, 매 3번째 element를 의미

(= 2,5,8,11, ... 번째의 li 태그 선택자를 의미)

* nth type selector로도 지칭할 수 없는 선택자가 있을 때 사용하는 것 같다.

 

#1-2. CSS cheat sheet : CSS 공부 중 모르는 점을 찾아볼 수 있는 정리표 개념

구글 이미지검색에 'CSS cheat sheet selector' 라고 검색하면 잘 정리된 표를 찾아볼 수 있다.