[CSS]CSS선택자3

1. 일반 구조 선택자(위치 기준)

형제 관계에 있는 요소 중에서 특정 요소만을 선택하는 선택자

    * 중요 *   ->  위치를 기준으로 구분함

 

    A:first-child    -> 형제들 중 첫 번째가 A가 맞다면 선택

    A:last-child     -> 형제들 중 마지막이 A가 맞다면 선택

    A:nth-child(숫자 또는 수열) -> 형제들 중 n번째가 A가 맞다면

    A:nth-last-child(숫자 또는 수열) ->  형제들 중 뒤에서 부터 n번째가 A가 맞다면

 

    (A : 선택된 요소)

 

 

[HTML]

 

[CSS]

 

# 결과

테스트1

테스트2

테스트3

테스트4

테스트5

---

 

 

2. 형태 구조 선택자

 

    선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자.
    (선택된 요소들을 기준으로 구분)

    :first-of-type : 같이 선택된 형제들 중에서 첫 번째 요소

    :last-of-type : 같이 선택된 형제들 중에서 마지막 요소

    :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열 번째 모든 요소

    :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열 번째 모든 요소

 

 

[HTML]

 

[CSS]

 

1) A선택자 > B선택자 : first-of-type

 

A의 자식 중 모든 B를 선택한 후 그 중 첫 번째 자식만 선택

 

2) A선택자 > B선택자 : last-of-type

 

 A의 자식 중 모든 B를 선택한 후 그 중 마지막 자식만 선택

 

 

3) A선택자 > B선택자 : nth-of-type(숫자)

 

 A의 자식 중 모든 B를 선택한 후 숫자 번째 자식만 선택

4) A선택자 > B선택자 : nth-last-of-type(숫자)

 

 A의 자식 중 모든 B를 선택한 후 뒤에서 숫자 번째 자식만 선택

 

 

#결과

 

 

3. 부정 선택자 ( :not() )

 

 

[HTML]

 

[CSS]

 

 #test3 자식 중 li태그를 모두 선택한 후 그 중 3n 번째를 제외하고 선택

 

#결과

• item1
• item2
• item3
• item4
• item5
• item6
• item7
• item8
• item9
• item10