آموزش سلکتور کلاه آ (~) در CSS

در زبان CSS یک سلکتور به نام (~)  وجود دارد. این علامت به ما امکان می دهد تا هر عنصری که پس از یک عنصر دیگر قرار دارد و هردوی این عناصر والد یکسانی دارند، را با استفاده از علامت(~)، انتخاب یا گزینش کنیم. بعنوان یک مثال، برای ایتالیک کردن هر عنصر ol که پس از یک عنصر h2 قرار دارد، و والد آنها یکسان است، باید دستور زیر را بنویسیم:

h2 ~ ol {font-style: italic;}.

برای دو عنصر مذکور، لازم نیست آنها حتماً خواهر یا برادر مجاور(adjacent siblings) باشند اما می توانند اینگونه هم باشند. نتیجه ی اِعمال دستورات بالا، در تصویر 2.22 نشان داده شده است:

<div>
  <h2>Subheadings</h2>
  <p>It is the case that not every heading can be a main heading. Some headings must be subheadings. Examples include:</p>
  <ol>
    <li>Headings that are less important</li>
    <li>Headings that are subsidiary to more important headlines</li>
    <li>Headings that like to be dominated</li>
  </ol>
  <p>Let's restate that for the record:</p>
  <ol>
    <li>Headings that are less important</li>
    <li>Headings that are subsidiary to more important headlines</li>
    <li>Headings that like to be dominated</li>
  </ol>
</div>

 همان طور که مشاهده می کنید، هردوی لیست های منظم به صورت ایتالیک(کج) قرار گرفته اند. علتش این است که هردوی این عناصر ol هستند، و پس از h2  قرار دارند و والد یکسانی(div) دارند.

( تصویر 2.22 )