CSS element ~ element सेलेक्टर (जनरल सिबलिंग सेलेक्टर) का उपयोग करके उन सभी तत्वों को चुना जा सकता है जो किसी निर्दिष्ट तत्व के **बाद में** आते हैं और उसी पैरेंट के बच्चे होते हैं। एडजेसेंट सिबलिंग सेलेक्टर (+) के विपरीत, यह केवल तुरंत अगले तत्व तक सीमित नहीं है।
उदाहरण
नीचे दिए गए उदाहरण में, p ~ ul सेलेक्टर उन सभी <ul> तत्वों को चुनता है जो <p> तत्व के बाद आते हैं और उसी पैरेंट के बच्चे हैं।
<!DOCTYPE html>
<html>
<head>
<style>
p ~ ul {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<div>
<p>Vegetables are good for health.</p>
<ul>
<li>Spinach</li>
<li>Onion</li>
<li>Capsicum</li>
</ul>
</div>
<p>Fruits are good for health.</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Kiwi</li>
</ul>
</body>
</html>
परिणाम: केवल दूसरा <ul> (Apple, Orange, Kiwi वाला) नीला होगा क्योंकि यह <p> ("Fruits are good for health.") का बाद का सिबलिंग है। पहला <ul> <div> के अंदर है, इसलिए <p> का सिबलिंग नहीं है।
तुलना:
+(एडजेसेंट): केवल तुरंत अगला सिबलिंग~(जनरल): उसी पैरेंट के सभी बाद के सिबलिंग्स
