인접 형제 결합자
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
인접 형제 결합자(+
)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다.
css
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}
구문
former_element + target_element { style properties }
예제
CSS
css
li:first-of-type + li {
color: red;
}
HTML
html
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
결과
명세
Specification |
---|
Selectors Level 4 # adjacent-sibling-combinators |
브라우저 호환성
BCD tables only load in the browser