CSS 선택자 정리(2)

문자열 속성 선택자 : 속성 값의 문자열을 확인하여 스타일을 적용하는 선택자

 

1) 선택자[속성 ~= "값"] : 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중

                                  특정 값을 포함하고 있는 태그 선택

 

2) 선택자[속성 |= "값"] : -로 구분되는 단어를 포함하는 태그를 선택한다

                               -로 구분되는 단어 중 맨 앞에 있어야 선택할 수 있다

 

3) 선택자[속성 ^="값"] : 특정 값으로 시작하는 태그 선택

 

4) 선택자[속성 $="값"] : 속성 값이 특정 값으로 끝나는 태그 선택

 

5) 선택자[속성 *="값"] : 값을 포함하는 태그 선택

 

일반 구조 선택자 : 단순 위치를 기준으로 판단하며 선택자와 다른 태그들이 존재 시 위치에 포함되는 문제가 있음

 

1) first-child / last-child : 형제 관계 태그 중 처음, 마지막

2) nth-child(수열)  : 수열에 존재하는 태그 모두 선택

3) nth-last-child(수열) : 수열 번째 존재하는 요소를 뒤에서부터

 

형태 구조 선택자 : 같은 위치의 태그들을 기준으로 판단하여 태그 선택

 

1) first-of-type : 형제 관계의 같은 태그 중 첫 번째 태그 선택

2) last-of-type : 형제 관계의 같은 태그 중 마지막 태그 선택

3) nth-of-type(수열) : 형제 관계의 같은 태그 중 수열에 맞는 태그 선택

4) nth-last-of-type(수열) : 형제 관계의 같은 태그 중 뒤에서 수열에 맞는 태그를 모두 선택

 

부정 선택자 : 해당 선택자를 제외한 태그를 선택

 

 :not(선택자) 

 

기타 선택자 :

 

only-child : 특정 요소의 자식이 하나 밖에 없을 때

only-of-type : 특정 요소의 자식 중 같은 유형의 형제 요소가 없을 때 

empty : 자식이 없는 요소를 선택

띄어쓰기 : 여러 선택자 고르기

 

<선택자의 우선순위>

1. !important

2. inline-style

3. id

4. class

5. tag