2장. CSS 셀렉터

[ 목차 ]

1. 복수의 셀렉터 지정

2. 전체 셀렉터

3. 태그 셀렉터

4. ID 셀렉터

5. 클래스 셀렉터

6. 어트리뷰트 셀렉터

7. 복합 셀렉터

8. 가상 클래스 셀렉터

9. UI 요소 상태 셀렉터

10. 구조 가상 클래스 셀렉터

11. 구조 가상 콜렉트 셀렉터 - 특정 위치

12.  부정 셀렉터

13. 정합성 체크 셀렉터

14. 가상 요소 셀렉터

 

1. 복수의 셀렉터 지정

1) 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표로 구분

 

2. 전체 셀렉터

1) * : HTML 문서 내의 모든 요소를 선택

 

3. 태그 셀렉터

1) 지정된 태그명을 가지는 요소를 선택

 

4. ID 셀렉터

1) #id 어트리뷰트 값 : id 어트리뷰트 값(중복될 수 없는 유일한 값)을 지정하여 일치하는 요소를 선택하는 것

 

5. 클래스 셀렉터

1) 클래스 어트리뷰트 값을 지정하여 일치하는 요소를 선택하는 것으로 클래스 어트리뷰트 값은 중복 가능

2) .class 어트리뷰트 값

 

6. 어트리뷰트 셀렉터

1) 지정된 어트리뷰트를 갖는 모든 요소를 선택

2) 셀렉터 [어트리뷰트="값"] : 지정된 어트리뷰트의 값과 일치하는 모든 요소 선택

3) 셀렉터 [어트리뷰트~="값"] : 지정된 어트리뷰트의 값이 지정된 값을 단어로 포함하는 요소 선택

4) 셀렉터 [어트리뷰트|="값"] : 지정된 어트리뷰트의 값과 일치하거나 연이은 하이픈으로 시작하는 요소 선택

5) 셀렉터 [어트리뷰트^="값"] : 지정된 어트리뷰트 값으로 시작하는 요소 선택

6) 셀렉터 [어트리뷰트&="값"] : 지정된 어트리뷰트 값으로 끝나는 요소 선택

7) 셀렉터 [어트리뷰트*="값"] : 지저된 어트리뷰트 값을 포함하는 요소 선택

 

 

7. 복합 셀렉터

1) 후손 셀렉터

  1] 자신의 한 레벨 상위에 속하는 요소를 부모요소, 한 레벨 하위에 속하는 요소를 자식요소라 지칭

  2] 자신보다 n 레벨 하위에 속하는 요소는 하위요소라 지칭

  3] 셀렉터A 셀렉터B

2) 자식 셀렉터

  1] 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택

  2] 셀렉터A > 셀렉터B

3) 인접 형제 셀렉터

  1] 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택

  2] A와 B 사이에 다른 요소가 존재하면 선택되지 않음

  3] 셀렉터A + 셀렉터B

4) 일반 형제 셀렉터

  1] 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택

  2] 셀렉터A ~ 셀렉터B

 

 

8. 가상 클래스 셀렉터

1) 요소의 특정 상태에 따라 스타일을 정의할 때 사용

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

3) 위 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법

4) 마침표 대신 콜론(:)을 사용하며, css표준에 의해 미리 정의된 이름이 있기에 임의의 이름 사용 불가

5) 마우스가 올라와 있을 때

6) 링크를 방문했을 때와 방문하지 않았을 때

7) 포커스가 들어와 있을 때

 

9. UI 요소 상태 셀렉터

1) :checked : 셀렉터가 체크 상태일 때

2) :enabled : 셀렉터가 사용 가능한 상태일 때

3) :disabled : 셀렉터가 사용 불가능한 상태일 때

 

10. 구조 가상 클래스 셀렉터

1) :first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택

2) :last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택

 

11. 구조 가상 콜렉트 셀렉터 - 특정 위치

1) :nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택

2) :nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택

3) :first-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택

4) :last-of-type : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택

5) :nth-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택

6) nth-last-of-type(n) : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택

 

12.  부정 셀렉터

1) :not : 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택

 

13. 정합성 체크 셀렉터

1) :valid(셀렉터) : 정합성 검증이 성공한 input 요소 또는 form 요소를 선택

2) :invalid(셀렉터) : 정합성 검증이 실패한 input 요소 또는 form 요소를 선택

3) 어트리뷰트 require : 필수조건 설정

 

14. 가상 요소 셀렉터

1) 가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용

2) 특정 부분 : 요소 콘텐츠의 첫글자 또는 첫줄, 요소 콘텐츠의 앞 또는 뒤

3) 가상 요소에는 두 개의 콜론(::)을 사용하며, 임의의 이름 사용 불가

4) selector :: pseudo-element {property:value;}

5) ::first-letter : 콘텐츠의 첫글자를 선택

6) ::first-line : 콘텐츠의 첫줄을 선택, 블록 요소에만 적용

7) ::after : 콘텐츠의 뒤에 위치하는 공간을 선택, content 어트리뷰트와 함께 사용

8) ::before : 컨텐츠의 앞에 위치하는 공간을 선택, content 어트리뷰트와 함께 사용

9) ::selection : 드래그한 콘텐츠를 선택, ios와 일부 브라우저에서 작동 안함