برای مثال میخواهیم عنصر p را کنار عنصر div انتخاب کنیم :

div + p {
    background-color: yellow;
}

نمایش دمو


1 . انتخابگر *

* {
    margin:0;
    padding:0;
}

سلکتور ستاره تمام عناصر درون صفحه را انتخاب میکند . بسیاری از طراحان از این انتخابگر استفاده میکنند تا به تمام element (عناصر) صفحه margin و padding صفر بدهند .

* {
    border:1px solid ;
}

نمایش دمو


2 . انتخابگر #


از این selector برای انتخاب یک عنصر با ID خاص استفائه میشود . در استفاده از selector # باید مراقب باشیم زیرا در مرورگر IE ممکن است مشکل ایجاد کند . با این selector فقط یک عنصر خواص را میتوانیم انتخاب کنیم و انتخاب گروهی عناصر ممکن نیست.

#firstname {
    background-color: yellow;
    color: red;
}



3 . انتخابگر .


ین یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.

.intro {
    background-color: yellow;
}


4 . انتخابگر x y

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

li a {
  color:red;
  font-size:18px;
  line-height:40px;
}


نمایش دمو


5 . انتخابگر x + y


برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید . 

برای مثال وقتی میخواهیم یک پاراگراف را کنار عنصر ul انتخاب کنیم با این روش عمل میکنیم .

ul + p {
  margin : 10px;
  color : green;
}

نمایش دمو