CSS 선택자(2)

5. 자식 선택자 (Child Selector)

- 자식 선택자는 지정한 특정 요소의 직접적인 자식에 해당하는 특정 요소에 매치됩니다. 추가적으로 감싼 요소는 선택하지 않습니다.

- 자식 선택자 기본문법 : 상위선택자>선택자 {속성: 값;}

6. 그룹 선택자 (Grouping Selector)

- 그룹 선택자는 여러 선택자를 복합적으로 사용하여 다수의 요소를 선택할 수 있습니다.

- 그룹 선택자 기본문법 : 선택자1, 선택자2, 선택자3 {속성: 값;}

- 바로 위 예시에 사용된 css 파일에 group2, group3 클래스 옵션을 추가합니다.

- 두 클래스의 배경색이 노란색으로 변경되었습니다.

7. 가상 클래스 선택자 (Pseudo Class Selector)

- 가상 클래스 선택자는 실제로 클래스를 부여하지 않지만 있는 것처럼 동작하는 선택자 입니다.

- 대표적으로 link, visited, hover, active 등이 있습니다.

- 가상 클래스 선택자 기본문법 : 선택자:가상 클래스 선택자 {속성:값;}

- group2 div 에 마우스를 올렸을 때 파란색으로 배경색이 변경되는 예시를 실습 해보겠습니다.

- 아래처럼 css 파일을 수정합니다.

- HTML 파일을 실행하고 그룹2에 마우스를 올립니다. 배경색이 파란색으로 변경됩니다.