6 .  x > y selector

تفاوت   بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>


یک سلکتور #container > ul  تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثال ul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.

برای درک بهتر به نمایش دمو بروید .

نمایش دمو  (با انتخابگر x > y )

نمایش دمو  (با انتخابگر x y )


7 .x ~ y selector 

این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند. 

ul ~ p {
   color : red ;
}

نمایش دمو


8 . x:checked  selector

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

input [type=radio] : checked {
   border : 1px solid black ;
}


نمایش دمو


9 . x:hover

اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :

a:hover {
 border-bottom: 1px solid black;
}


نمایش دمو


10 . x:not  selector 

div:not(#container) {
   color: blue;
}

این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :

*:not(p) {
  color: green;
}