인접 형제 결합자(+
)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
구문
former_element + target_element { style properties }
예제
CSS
li:first-of-type + li {
color: red;
}
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
결과
명세
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'next-sibling combinator' in that specification. |
Working Draft | |
Selectors Level 3 The definition of 'Adjacent sibling combinator' in that specification. |
Recommendation | |
CSS Level 2 (Revision 1) The definition of 'Adjacent sibling selectors' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser