CSS 네스팅의 우선순위를 보다가 좀 독특한 사항이 있는 것을 발견했다.

<b class="foo"><i>blue?</i></b>

#a, b {
	i {
		color: blue;
	}
}
.foo i {
	color: green;
}

이렇게 되어 있을 때 네스팅이 마치 아래와 같이 나눠져서 적용된다고 생각할 수 있다.

/* WRONG! */
#a i {
	color: blue;
}
b i {
	color: blue;
}
.foo i {
	color: green;
}

.foo i가 b i보다 우선 순위가 높기 때문에 녹색으로 예상되지만 실제로는 파란색이 적용된다.

네스팅을 쓰면 같이 있는 셀렉터에서 가장 높은 우선순위가 적용된다고 한다. 그래서 b i 와 #a i가 분리되는 것이 아니고 마치 is(#a, b) i를 사용한 것과 같이 작동한다.