مفهوم علامت های + ~ < در CSS

سلام. این علامت ها به بحث selector ها در CSS مربوط میشه.

بیاین با مثال براتون توضیح بدم:

سلکتور + (adjacent sibling selector)

این سلکتور برای انتخاب اولین المنتی بکار میره که دقیقا بعد از یک المنت مشخص(بعد از تگ پایان) اومده باشه.

توجه کنید که توی html تگ ها دو حالت با و بسته دارن مثل <p> و </p> که به هر کدوم از این ها یه تگ میگیم و به حالت کامل اینا با محتویاتش یه المنت گفته میشه مثل <p>hello world</p>. یکسری از تگ ها هم Self-Closing هستن مثل <br />. که توی ورژن جدید html میتونید اینطوری بنویسید: <br>.

حالا به این مثال توجه کنید:

<style>
div + p {
color:red;
}
</style>

<div id="rootDiv">
  <p>First in rootDiv</p>
  <p>Second in rootDiv</p>
  <p>Third in rootDiv</p>
  <div id="div-in-root">
    <p>First in div-in-root</p>
    <p>Second in div-in-root</p>
    <p>Third in div-in-root</p>
  </div>
  <p>First AFTER div-in-root</p> <!-- این مورد انتخاب میشود -->
  <p>Second AFTER div-in-root</p>
  <p>Third AFTER div-in-root</p>
</div>
<p>First AFTER rootDiv</p> <!-- این مورد انتخاب میشود -->
<p>Second AFTER rootDiv</p>
<p>Second AFTER rootDiv</p>

همونطور که گفتم اولین المنت هایی که بعد از تگ پایانی div ها اومده انتخاب شدن. ‍div + p یعنی اولین المنت <p> که بعد از هر المنت <div> اومده باشه.

سلکتور ~ (general sibling selector)

برای انتخاب تمامی المنت های که بعد از یک المنت مشخص اومده باشن با والد یکسان از این سلکتور استفاده میشه. مهم نیست که المنت انتخابی کجا باشه یا چندین بار اومده باشه فقط باید والدشون یکی باشه. مثال رو ببینید:

p ~ ul {
  color: red;
}

<p>The first paragraph.</p>

<div>A div element.
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

<a href="https://irdevs.com">Join the community!</a>

<ul> <!-- انتخاب میشود -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul><!-- انتخاب میشود -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

همونطور که میبینید تمام ul های بعد از p که والد یکسان دارن انتخاب شدن.

سلکتور < (Child Selector)

از این سلکتور برای انتخاب تمامی المنتهایی استفاده میشه که بصورت مستقیم یک والد مشخص دارن استفاده میشه. همون مثال بالا رو برای این سلکتور استفاده میکنم، ببینید:

<style>
#rootDiv > p {
color:red;
}
</style>

<div id="rootDiv">
  <p>First in rootDiv</p> <!-- این مورد انتخاب میشود -->
  <p>Second in rootDiv</p> <!-- این مورد انتخاب میشود -->
  <p>Third in rootDiv</p> <!-- این مورد انتخاب میشود -->
  <div id="div-in-root">
    <p>First in div-in-root</p> 
    <p>Second in div-in-root</p>
    <p>Third in div-in-root</p>
  </div>
  <p>First AFTER div-in-root</p> <!-- این مورد انتخاب میشود -->
  <p>Second AFTER div-in-root</p> <!-- این مورد انتخاب میشود -->
  <p>Third AFTER div-in-root</p> <!-- این مورد انتخاب میشود -->
</div>
<p>First AFTER rootDiv</p>
<p>Second AFTER rootDiv</p>
<p>Second AFTER rootDiv</p>

توجه کنید که گفتم فقط چایلد های مستیم انتخاب میشن. به همین خاطر <p> های داخل div دوم انتخاب نمیشن چون فرزند مستقیم نیستن.

امیدوارم کاملا متوجه شده باشید. در این مورد میتونید بیشتر تحقیق کنید. اگر سوالی داشتید حتما بپرسید ????