일반 형제 셀렉터

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 5번째.

일반 형제 선택자(~)는 지정된 요소의 형제이면서 그 뒤에 오는 모든 요소를 선택합니다.

예를 들어:

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

다음 CSS를 사용하면:

h2 ~ p {
  color: blue;
}

이 CSS를 적용한 후의 결과는 다음과 같습니다:

단락 1은 변경되지 않은 상태로 유지됩니다 (h2 뒤에 오는 형제 요소가 아니기 때문입니다)

단락 2는 파란색이 됩니다 (h2 뒤에 오는 형제 요소입니다)
단락 3은 파란색이 됩니다 (h2 뒤에 오는 형제 요소입니다)

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

일반 형제 선택자(general sibling selector)를 사용하여 <h1> 뒤에 오는 모든 <p> 요소의 색상을 밝은 분홍색(#ff69b4)으로 지정하는 CSS 규칙을 만드세요.

치트 시트

일반 형제 선택자(~)는 지정된 요소의 형제이며 그 뒤에 나오는 모든 요소를 선택합니다.

h2 ~ p {
  color: blue;
}

이것은 <h2>의 형제이며 HTML 구조에서 그 뒤에 오는 모든 <p> 요소를 선택합니다.

직접 해보기

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.