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

30 سلکتور CSS که طراحان وب باید بدانند
حتما تا حالا به خوبی یاد گرفته اید که چگونه با سلکتور های ID ، Class و سلکتورهای پدر و فرزندی کار کنید، اما برای یک طراحی حرفه ای و بهینه نیاز به دانش بیشتری خواهید داشت، باید سلکتورهای بیشتری را یاد بگیرید تا بتوانید در کدهای جی کوئری خود از طریق این سلکتورها عملیاتی که میخواهید را انجام دهید، با مجیدآنلاین در این مقاله همراه باشید تا نحوه ی استفاده از این سلکتورها را یاد بگیرید.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

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 بار نمیتوانید از ID استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های 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 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.

محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .

نظرات و سوالات کاربران

ارسال پاسخ shahab ahmadzadeh
shahab ahmadzadeh
چهارشنبه ۲۲ اردیبهشت ۱۴۰۰ ۰۰:۳۵
مرسی واقعا کارمو راه انداخت
ارسال پاسخ افرین
افرین
سه شنبه ۱۴ بهمن ۱۳۹۹ ۱۱:۵۶
با سلام و احترام
میخوام باافزونه فرم ساز هست (گراویتی) برگه ایی درست کنم که باهاش بتونم عکسی اپلود کنم که طبق سایز عکس بتونم مبلغ تعربف کنم امکان پذیر هست یا برنامه دیگه باید بخرم
لطفا راهنمایی کنید
ارسال پاسخ arash
arash
دوشنبه ۱۴ بهمن ۱۳۹۸ ۰۱:۲۱
در پاسخ به دیدگاه زهرا ارسال شده در چهارشنبه ۲۱ آذر ۱۳۹۷ ۲۱:۱۸
#rdimg1:checked ~ #one ,
#rdimg2:checked ~ #two ,
#rdimg3:checked ~ #three {
z-index: 9;
opacity: 1;
این قطعه کد من در ie اجرا میشه ولی درchroome , edge نه؟؟؟؟؟لطفا کمک کنید
مرورگرتونو آپدیت کردین؟؟
ارسال پاسخ زهرا
زهرا
چهارشنبه ۲۱ آذر ۱۳۹۷ ۲۱:۱۸
#rdimg1:checked ~ #one ,
#rdimg2:checked ~ #two ,
#rdimg3:checked ~ #three {
z-index: 9;
opacity: 1;
این قطعه کد من در ie اجرا میشه ولی درchroome , edge نه؟؟؟؟؟لطفا کمک کنید
ارسال پاسخ دانیال
دانیال
دوشنبه ۱۸ اردیبهشت ۱۳۹۶ ۲۰:۲۹
سلام
مطالبتون بسیار عالی بود، شاید این 15 باره که من از این صفحه استفاده کردم
ارسال پاسخ سیاوش
سیاوش
پنج شنبه ۲۷ خرداد ۱۳۹۵ ۱۲:۵۰
این ستاره و آندلاین در کد زیر چیه
*display: inline-block;
_height: 1%;
ارسال پاسخ احمد
احمد
چهارشنبه ۱۹ خرداد ۱۳۹۵ ۱۸:۵۶
سلام دوست گرامی
مطلب بسیار مفید و آموزنده ای بود تشکر ...