selector 심화

특성 선택자(속성 선택자)

특성 선택자는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

<!--클래스 속성을 가지고 있는 요소 선택하기-->
[class] {
	background-color: tomato;
}
<!--클래스가 "item"인 요소를 선택하기-->
[class="item"] {
	background-color: tomato;
}

기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

<!--클래스 값에 "it"가 포함되는 요소를 선택하기-->
[class *= "it"] {color: red;}

<!--클래스 값이 "it"로 시작하는 요소를 선택하기-->
[class ^= "it"] {color: red;}

<!--클래스 값이 "it"로 끝나는 요소 선택하기-->
[class $= "it"] {color: red;}

결합 선택자

결합 선택자(결합자)는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다.
다음 두 가지로 구분할 수 있다.

• 자손 결합자
• 형제 결합자

자손 결합자

<!--div 요소 안에 위치하는 모든 p요소 선택하기-->
div p {color: red;}

<!--div 요소 바로 아래에 위치하는 모든 p요소 선택하기-->
div > p {color: red;}

형제 결합자

<!--h1 요소 뒤에 오는 형제 중 모든 p요소 선택하기-->
h1 ~ p {color: red;}

<!--h1 요소 바로 뒤에 오는 형제 p요소 선택하기-->
h1 + p {color: red;}

hover했을 때 다른 요소에 변화주기

<!--큐브가 컨테이너 바로 하위 요소로 있는 경우-->
#container:hover > #cube { background-color: yellow; }
 
<!--큐브가 컨테이너 바로 뒤에 있는 형제 요소일 경우-->
#container:hover + #cube { background-color: yellow; }
    
<!--큐브가 컨테이너의 하위 요소에 있는 경우-->
#container:hover #cube { background-color: yellow; }

<!--큐브가 컨테이너의 형제인 경우-->
#container:hover ~ #cube { background-color: yellow; }