형제 선택자 사용하기

별초롱언니 2025. 3. 25. 14:11

input ~ .slidebox : input 태그의 뒤에 위치한 모든 형제 요소들 중 class="slidebox"인 요소

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../CSS/ch08/sibling.css">
  <title>Document</title>
</head>
<body>
  <div>
    <input type="checkbox" id="btn1">
    <label for="btn1">버튼1</label>
    <div class="description"> 여기는 버튼1이의 설명입니다. </div>
  </div>

  <div>
    <input type="checkbox" id="btn2">
    <label for="btn2">버튼2</label>
    <div class="description"> 여기는 버튼2의 설명입니다. </div>
  </div>

  <div>
    <input type="checkbox" id="btn3">
    <label for="btn3">버튼3</label>
    <div class="description"> 여기는 버튼3의 설명입니다. </div>
  </div>
</body>
</html>

See the Pen Untitled by byeolchorong (@byeolchorong) on CodePen.