CSS : CSS 선택자 심화 (X:not() {}, X + Y{}, X:hover ~ Y{}, X:hover Y{})

자주 쓰이는 선택자들 말고 유용한 선택자들이 있어서 추가로 정리해 보았다.

 

1. X : not(선택자)

div:not(.container) {
   color: blue;
}

div를 선택하는데 클래스 값이 container인 div를 제외하고 선택된다. 

 

 

2. X + Y 인접 선택자

div + p {
	color : blue;
    }

앞의 요소 바로 뒤에 있는 요소만 선택한다.

위 코드를 예로들면 각 div들 뒤에 오는 첫 번째 단락의 p만 빨간색이 됩니다.

 

 

3. X:hover   Y   (hover 와 Y사이에 띄어쓰기)

<div id:container>
	<div id:cube> </div>
</div>


<style>
#container:hover #cube {
	background-color : yellow;
    }
</style>

container라는 아이디를 가진 엘리먼트에 마우스를 호버시키면 #cube에 css가 적용된다.

! 엘리먼트 X(#container)안에 엘리먼트 Y(#cube)가 있을 때 적용 가능. 부모 - 자식관계.

 

4. X:hover ~ Y 

<div id="container"> </div>
<div id="cube"> </div>

<style>
#container:hover ~ #cube {
	background-color : yellow;
    }
</style>

container라는 아이디를 가진 엘리먼트에 마우스를 호버시키면 #cube에 css가 적용된다.

! 엘리먼트 X(#container)와 엘리먼트 Y(#cube) 가 형제 관계일때.