[CSS] 형제선택자, 인접형제선택자

css에서 선택자에 대해 필요한 것만 학습했는데, 이렇게 유용하게 쓰일지 몰랐다. 형제선택자를 통해 구조를 면밀히 짤 필요를 느껴 정리해보았다.

2021.03.18 - [🔥 TIL] - [CSS] 선택자 사용하여 % 값으로 템플릿 설정하기

 

선택자를 보고 위의 글을 보는데 이해가 빠를것같다.

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

 

1. [1] 이 변경.

/* 자신을 의미. */
li:first-child:last-nth-child(4) {
    color: red;
}

 

2. [1] 을 뺀 나머지 변경.
   • 인접형제결합자(~)

/* 자신을 뺀 나머지. */
li:first-child:last-nth-child(4) ~ li {
	color: red;
}

 

3. [2] 만 변경. 자신과 나머지 형제들은 변경되지 않는다.
   • 형제결합자(+)

/* 자신의 바로 아래 형제만 변경. */
li:first-child:last-nth-child(4) + li {
    color: red;
}

 

4. {{추가}}

/* 4-1 : 모두 선택. */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    color: red;
}

/* 4-2 : 본인과 다음형제만 선택. :: 1,2만 변경 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) + li {
    color: red;
}

 

여기서 3번 형제 결합자(+) 주의할 점!!!

<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p> <!-- 기준 -->
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>

p ~ span {
    color: red;
}

위의 경우는 "기준"을 중심으로 형제들인 span 태그들이 스타일에 적용된다.

 

하지만,

p + span {
    color: blue;
}

위는 조건에 맞는 태그들이 없다.( 스타일이 모두 적용되지 않음)

바로 p 태그 아래에 span 이 있어야 하는데 code 태그가 있으므로 적용되지 않는다.

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator

https://developer.mozilla.org/ko/docs/Web/CSS/Adjacent_sibling_combinator

https://homzzang.com/b/css-296