CSS के साथ सिबलिंग एलिमेंट्स का चयन करना

परिचय

CSS दो सिबलिंग कॉम्बिनेटर्स प्रदान करता है: एडजेसेंट सिबलिंग (+) और जनरल सिबलिंग (~)। दोनों समान पैरेंट के चाइल्ड एलिमेंट्स का चयन करते हैं लेकिन अलग-अलग दायरे के साथ।

सिंटैक्स

एडजेसेंट सिबलिंग कॉम्बिनेटर

prev + next {
  property: value;
}

केवल तभी मेल खाता है जब next prev के **तुरंत बाद** आता है।

जनरल सिबलिंग कॉम्बिनेटर

prev ~ next {
  property: value;
}

prev के **बाद के सभी** सिबलिंग्स से मेल खाता है जो समान पैरेंट साझा करते हैं।

उदाहरण 1: एडजेसेंट सिबलिंग (+)

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      display: flex;
      margin: 2%;
      padding: 2%;
      box-shadow: inset 0 0 24px cyan;
      justify-content: space-around;
    }
    div + p {
      font-size: 1.2em;
      font-weight: bold;
      background: powderblue;
    }
    section {
      box-shadow: 0 0 3px rgba(0,0,0,0.8);
    }
  </style>
</head>
<body>
  <div id="parent">
    <img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" />
    <div>
      <p>Check this</p>
      <section><p>Some text in section</p></section>
      <span>hello</span>
    </div>
    <p>Selected</p>
  </div>
</body>
</html>

उदाहरण 2: जनरल सिबलिंग (~)

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      display: flex;
      margin: 2%;
      padding: 2%;
      background: thistle;
      justify-content: space-between;
    }
    section ~ p {
      text-align: center;
      font-size: 1.2em;
      font-weight: bold;
      background: lavender;
    }
  </style>
</head>
<body>
  <div id="parent">
    <img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" />
    <div>
      <p>Random text 1</p>
      <section><p>Some text in section</p></section>
      <span>hello</span>
      <p>Selected</p>
    </div>
    <img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
  </div>
</body>
</html>

तुलना

व्यावहारिक उपयोग के मामले

1. फॉर्म वैलिडेशन फीडबैक

<!DOCTYPE html>
<html>
<head>
  <style>
    .form-group { margin: 1rem 0; }
    .form-group input { width: 100%; padding: 0.75rem; border: 2px solid #ddd; border-radius: 4px; }
    .form-group input:invalid:not(:placeholder-shown) { border-color: #dc3545; }
    .form-group input:invalid:not(:placeholder-shown) + .error-message {
      display: block;
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 0.25rem;
    }
    .error-message { display: none; }
  </style>
</head>
<body>
  <form>
    <div class="form-group">
      <input type="email" placeholder="ईमेल दर्ज करें" required />
      <span class="error-message">कृपया वैध ईमेल दर्ज करें</span>
    </div>
  </form>
</body>
</html>

2. एकॉर्डियन/टॉगल पैटर्न्स

<!DOCTYPE html>
<html>
<head>
  <style>
    .accordion summary { cursor: pointer; padding: 1rem; background: #f5f5f5; border: 1px solid #ddd; }
    .accordion summary::marker { content: "▶ "; }
    .accordion[open] summary::marker { content: "▼ "; }
    .accordion-content { padding: 1rem; border: 1px solid #ddd; border-top: none; }
    /* खुले एकॉर्डियन के बाद के सभी एकॉर्डियन को छुपाएं */
    .accordion[open] ~ .accordion .accordion-content { display: none; }
  </style>
</head>
<body>
  <details class="accordion" open>
    <summary>सेक्शन 1</summary>
    <div class="accordion-content">कंटेंट 1</div>
  </details>
  <details class="accordion">
    <summary>सेक्शन 2</summary>
    <div class="accordion-content">कंटेंट 2</div>
  </details>
  <details class="accordion">
    <summary>सेक्शन 3</summary>
    <div class="accordion-content">कंटेंट 3</div>
  </details>
</body>
</html>

ब्राउज़र सपोर्ट

दोनों सभी मॉडर्न ब्राउज़र में सपोर्टेड हैं (IE7+ के लिए +, IE7+ के लिए ~)।