30 سلکتور css که طراحان وب باید بدانند

1 - Selector *

کد:

---

* {
 margin: 0;
 padding: 0;
}

---

ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :

کد:

---

#container * {
 border: 1px solid black;
}

---

در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو2 - X Selector#

کد:

---

#container {
  width: 960px;
  margin: auto;
}

---

اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو3. X Selector.

کد:

---

.error {
  color: red;
}

---

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

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو4. X Y Selector

کد:

---

li a {
  text-decoration: none;
}

---

یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو5. X Selector

کد:

---

a { color: red; }
ul { margin-left: 0; }

---

اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو6. X:visited و X:link

کد:

---

a:link { color: red; }
a:visted { color: purple; }

---

از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو7. X + Y Selector

کد:

---

ul + p {
  color: red;
}

---

برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو8. X > Y Selector

کد:

---

div#container > ul {
  border: 1px solid black;
}

---

تفاوت بین حالت 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 در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو9. X ~ Y Selector

کد:

---

ul ~ p {
  color: red;
}

---

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

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو10. X[title] Selector

کد:

---

a[title] {
  color: green;
}

---

در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو11. X[href="foo"] Selector

کد:

---

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

---

قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو12. X[href*="nettuts"] Selector

کد:

---

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

---

حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو13. X[href^="http"] Selector

کد:

---

a[href^="http"] {
  background: url(path/to/external/icon.png) no-repeat;
  padding-left: 10px;
}

---

تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو14. X[href$=".jpg"] Selector

کد:

---

a[href$=".jpg"] {
  color: red;
}

---

با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو15. X[data-*="foo"] Selector

کد:

---

a[data-filetype="image"] {
  color: red;
}

---

به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :

کد:

---

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
  color: red;
}

---

اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.

کد:

---

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

---

به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :

کد:

---

a[data-filetype="image"] {
  color: red;
}

---

پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو16. X[foo~="bar"] Selector

کد:

---

X[foo~="bar"]a[data-info~="external"] {
  color: red;
}
 
a[data-info~="image"] {
  border: 1px solid black;
}

---

این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :

کد:

---

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

---

حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :

کد:

---

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
  color: red;
}
 
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

---

پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو17. X:checked Selector

کد:

---

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

---

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

• IE9+
• Firefox
• Chrome
• Safari
• Opera

نمایش دمو18. X:after Selector

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

کد:

---

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix {
  *display: inline-block;
  _height: 1%;
}

---

با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

کد:

---

div:hover {
  background: #e3e3e3;
}

---

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

کد:

---

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

---

پشتیبانی مرورگرها :

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not Selector

div:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :

کد:

---

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

---

پشتیبانی مرورگرها :

• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو21. X::pseudoElement Selector

کد:

---

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

---

میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :

کد:

---

p::first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: cursive;
  padding-right: 2px;
}

---

این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو22. X:nth-child(n) Selector

کد:

---

li:nth-child(3) {
  color: red;
}

---

میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari

مشاهده دمو23. X:nth-last-child(n) Selector

کد:

---

li:nth-last-child(2) {
  color: red;
}

---

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

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمو24. X:nth-of-type(n) Selector

کد:

---

ul:nth-of-type(3) {
  border: 1px solid black;
}

---

همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari

مشاهده دمو25. X:nth-last-of-type(n) Selector

کد:

---

ul:nth-last-of-type(3) {
  border: 1px solid black;
}

---

میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child Selector

کد:

---

ul li:first-child {
  border-top: none;
}

---

با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو27. X:last-child Selector

کد:

---

ul > li:last-child {
  color: green;
}

---

این سلکتور دقیقا برخلاف first-child میباشد.

• پشتیبانی مرورگر ها :
• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو28. X:only-child Selector

کد:

---

div p:only-child {
  color: red;
}

---

کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :

• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو29. X:only-of-type Selector

کد:

---

li:only-of-type {
  font-weight: bold;
}

---

با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمو30. X:first-of-type Selector

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

کد:

---

<div>
  <p> My paragraph here. </p>
  <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
  </ul>
 
  <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
  </ul> 
</div>

---

راه حل 1

کد:

---

ul:first-of-type > li:nth-child(2) {
  font-weight: bold;
}

---

راه حل 2

کد:

---

p + ul li:last-child {
  font-weight: bold;
}

---

راه حل 3

کد:

---

ul:first-of-type li:nth-last-child(1) {
  font-weight: bold; 
}

---

پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمونتیجه گیری

اگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو2 - X Selector#

#container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو3. X Selector.

.error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو4. X Y Selector

li a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو5. X Selector

a { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو6. X:visited و X:link

a:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو7. X + Y Selector

ul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو8. X > Y Selector

div#container > ul {
border: 1px solid black;
}
تفاوت بین حالت 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 در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو9. X ~ Y Selector

ul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو10. X[title] Selector

a[title] {
color: green;
}

در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو11. X[href="foo"] Selector

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو12. X[href*="nettuts"] Selector

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو13. X[href^="http"] Selector

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو14. X[href$=".jpg"] Selector

a[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو15. X[data-*="foo"] Selector

a[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو16. X[foo~="bar"] Selector

X[foo~="bar"]a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو17. X:checked Selector

input[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :

• IE9+
• Firefox
• Chrome
• Safari
• Opera

نمایش دمو18. X:after Selector

این یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}

.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

div:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not Selector

div:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :*:not(p) {
color: green;
}
پشتیبانی مرورگرها :

• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو21. X::pseudoElement Selector

p::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :

• IE6+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو22. X:nth-child(n) Selector

li:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari

مشاهده دمو23. X:nth-last-child(n) Selector

li:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمو24. X:nth-of-type(n) Selector

ul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari

مشاهده دمو25. X:nth-last-of-type(n) Selector

ul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child Selector

ul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :

• IE7+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو27. X:last-child Selector

ul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.

• پشتیبانی مرورگر ها :
• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو28. X:only-child Selector

div p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :

• IE9+
• Firefox
• Chrome
• Safari
• Opera

مشاهده دمو29. X:only-of-type Selector

li:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمو30. X:first-of-type Selector

با استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>

<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2p + ul li:last-child {
font-weight: bold;
}
راه حل 3ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

مشاهده دمونتیجه گیری

اگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.