[css] 인접 형제 선택자

22 Dec 2023

CSS의 인접 형제 선택자는 요소의 인접 형제 중에서 특정한 요소를 선택하는 데 사용됩니다.

이것은 다른 형제 선택자와 다르게 바로 옆에 인접한 요소만을 선택합니다.

사용 방법

element + selector {
  property: value;
}

위의 코드에서 element는 선택하고자 하는 요소를 나타내며, selector는 선택된 형제 요소에 적용할 스타일을 지정합니다.

예제

다음은 인접 형제 선택자를 사용한 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    p + p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph.</p>
</body>
</html>

위의 예제에서, 두 번째 <p>는 인접 형제 선택자에 의해 선택되어 텍스트가 빨간색으로 바뀝니다.

결론

CSS의 인접 형제 선택자를 사용하면 특정한 요소의 바로 옆에 인접한 요소에 스타일을 적용할 수 있습니다.

더 많은 정보를 원하시면 MDN web docs에서 확인해보세요.