<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2025-07-19 </p>  <div><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity">CSS 네스팅의 우선순위</a>를 보다가 좀 독특한 사항이 있는 것을 발견했다.</p>

<pre><code>&lt;b class="foo"&gt;&lt;i&gt;blue?&lt;/i&gt;&lt;/b&gt;</code></pre>

<pre><code>#a, b {
	i {
		color: blue;
	}
}
.foo i {
	color: green;
}</code></pre>

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

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

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

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

신현석(Hyeonseok Shin)

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를 사용한 것과 같이 작동한다.

CSS 네스팅과 우선순위

댓글