انتخابگرها (Selectors) در CSS یک بار برای همیشه !!

یک سوال/مشکلی که شاید برای خیلی ها در هنگام "یادگیری/انجام کار" پیش اومده باشه این است که در انتخاب Selector دچار شک/اشتباه میشوند و درون یک لوپ اذیت کننده گیر می‌کنند به دلیل ندانستن سلکتور مناسب پس بعد از مدت زمانی درگیری، تسلیم شده و بجای استفاده از سلکتور مناسب روی می‌آورند به DOM Manipulation با استفاده از جاوا اسکریپت یا از اون بدتر تغییر دادن DOM Structure !!‌ .

سی اس اس سلکتورهای نسبتاً زیادی دارد اما واقعاً همه آن‌ها مکرر استفاده نمی‌شوند و تعدادی مورد استفاده‌های خاص دارند از این تعداد بعضی‌ها از روی اسم مشخص می‌شود که چه کاری انجام می‌دهند و تعدادی هم علامت سوال باقی می‌مانند لازم نیست به همه سلکتور ها مسلط باشید هدف این پست توضیح و تشریح کاربردی‌ترین و پراستفاده‌ترین سلکتورها به طور کامل و یک بار برای همیشه است .

در پایین یک شِما کلی از سلکتورهای پرکاربرد و مهم آورده‌ام اما قبل از اینکه به سراغشون بریم لازم دونستم بگم اشاره‌ای به سلکتور کلاس و آیدی ( ' . ' , ' # ' ) نکردم چون فرض بر این است که اگر کسی از این دو مطلع نباشه بهتره بجای ادامه این مطلب، آموزش ابتدایی css رو شروع کنه.

draw.io ساخته شده با
draw.io ساخته شده با

۱ . سلکتور فرزندان: برای استفاده از این سلکتور نیازی به استفاده از کاراکتر خاصی نیست در واقع همان فاصله (space) بین المنت‌ها است و تمامی فرزندان المنت موردنظر رو انتخاب می‌کند .

مثلا فرض کنید داریم :

ساختار HTML مثال
ساختار HTML مثال


ساختار CSS مثال
ساختار CSS مثال


  • سوال: استایل بر روی کدام پاراگراف ها اعمال میشود؟‌
  • جواب: همه

وقتی از سلکتور فرزندان استفاده می‌کنید تو در تویی المنت ها اهمیتی ندارد فقط کافیه فرزند Wrapper اصلی باشند.

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

ساختار HTML با تو در تویی عمیق المنت ها
ساختار HTML با تو در تویی عمیق المنت ها

۲. سلکتور فرزند مستقیم (<)‌: فرزند مستقیم المنت مورد نظر رو انتخاب می‌کند.

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

مثال قبل رو با سلکتور فرزند مستقیم بازنویسی می‌کنیم‌:

ساختار HTML با تو در تویی فرزندان
ساختار HTML با تو در تویی فرزندان


ساختار CSS مثال
ساختار CSS مثال


  • سوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌
  • جواب: پاراگراف‌های خط ۲ و ۲۲ ( اولین پاراگراف بعد از تگ section و آخرین پاراگراف قبل از بسته شدن تگ section )

۳. سلکتورهای ( خویشاوند ) :‌

۳ ـ ۱ :‌ General Sibling Selector : (‌ ~ ) : با استفاده از این سلکتور تمامی المنت‌هایی که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید:

ساختار HTML مثال ~
ساختار HTML مثال ~


ساختار CSS مثال ~
ساختار CSS مثال ~


  • سوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌
  • جواب: پاراگراف‌های ۲۲ و ۲۳

شروطی که پاراگراف‌هایی که انتخاب می‌شوند باید داشته باشند:

  • بعد از المنت H1 آمده باشند
  • المنت پدر اونها با H1 یکی باشه

به دلیل نقض موارد بالا استایل بر روی پاراگراف های خط ۱۲ , ۱۴ ,۱۶ , ۲۰ و ۲۵ با استفاده از این سلکتور تمامی المنت‌های که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید: اجرا نمی‌شود.

برسی جداگانه موارد نقض:

خط های ۱۲-۱۴-۱۶ : قبل از H1 اومدن

خط ۲۰-۲۵ : پاراگراف‌ها بعد از H1 اومدن اما پدر پاراگراف‌ها با H1 یکی نیست در خط ۲۰ پدر پاراگراف یک div است و خط ۲۵ پاراگراف بیرون از section که پدر H1 هست قرار دارد.


۳ ـ ۲ : Adjacent Sibling Selector (+): با استفاده از این سلکتور تنها اولین المنت از جنس سمت راست "+" که مستقیما بعد از المنت از جنس سمت چپ "+" اومده باشه انتخاب میشه با این تفاسیر اگه مثال قبل رو در نظر بگیریم هیچ پاراگرافی انتخاب نمی‌شود اما اگه بعد از H1 مستقیما پاراگراف هایی داشته باشیم هر تعدادی هم که باشند مهم نیست تنها اولین پاراگراف انتخاب می‌شود:


Adjacent Sibling Selector
Adjacent Sibling Selector
Adjacent Sibling Selector
Adjacent Sibling Selector


  • سوال: استایل بر روی کدام پاراگراف(ها) اعمال می‌شود؟‌
  • جواب: تنها پاراگراف بعد از H1

۴. سلکتور های خصیصه (Attribute Present Selector):
تگ های HTML دارای attribute های مختلف و زیادی هستند می‌توان در css از این attr ها استفاده کرد. مثلا:


ساختار HTML مثال attribute selectors
ساختار HTML مثال attribute selectors
ساختار CSS مثال attribute selectors
ساختار CSS مثال attribute selectors


در مثال بالا از attr های href,type,id استفاده شده اما اکثر attr ها قابل استفاده است مانند attr های form,input , ....

در مثال بالا شاید کاراکترهای $,^,* کمی گیج کننده باشد اما فقط تا چند ثانیه دیگه d:

' '=^ : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شروع شود با محتوای درون ' '

' '=* : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شامل محتوای درون ' ' باشد

' '=$ : به این معنی است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده به محتوای درون ' ' خاتمه یابد

برای درک بهتر دوباره به مثال رجوع می‌کنیم:

  • در آیتم اول تنها مساوی استفاده شده با محتوای https://google.com این سلکتور تگ های a که دقیقا شامل href گوگل است انتخاب می‌کند.
  • در آیتم دوم تگ های a که href شان با https://hub شروع میشود انتخاب می‌شوند.
  • در آیتم سوم و چهارم تگ های a که href شان با io,org خاتمه میبابد انتخاب میشوند .
  • در آیتم پنجم تگ های a که href شان شامل کلمه redux است انتخاب میشوند .
  • در آیتم ششم لیست های ol که تایپشان yellow است انتخاب میشوند .
  • در آیتم هفتم span درون div با آیدی unique_div انتخاب میشود .

۵ : سلکتور های شبه کلاس ( Pseudo-classes ) : شبه کلاس ها زمانی استفاده میشوند که نیاز به دسترسی به یک المنت در موقعیت یا حالتی خاص از آن را داشته باشیم که ۸ مورد از متداول ترین آنها را در زیر توضیح دادم :

۵ ـ ۱ : سلکتور های شبه کلاس مربوط به لینک ها : ( Link Pseudo-classes ) :

a:link {...} ~> لینک ها در حالت عادی و دیده نشده
a:visited {...} ~> لینک ها در حالت دیده شده
a:visited {...} ~> لینک ها در حالت دیده شده

۵ ـ ۲ : سلکتور های شبه کلاس مربوط به رفتار کاربر : ( User Action Pseudo-classes ) :

a:hover {...} ~> المنتی که در حال حاظر نشانگر بر رویش قرار داره
a:active‌ {...} ~> لینک فعال در حال حاظر
a:focus {...} ~> المنتی که تاچ شده

۵ ـ ۳ : سلکتور های شبه کلاس مربوط به وضعیت رابط کاربری : ( User Interface State Pseudo-classes ) : 

input:enabled {...} ~> input های فعال
input:disabled {...} ~> input های غیرفعال
input:checked {...} ~> چک باکس های تیک خورده
input:indeterminate {...} ~> وقتی که بر روی سلکت باکس یا رادیو باکسی هنوز تغییری اعمال نشده

۵ ـ ۴ : سلکتور های شبه کلاس مربوط به ساختار و مکان : ( Structural & Position Pseudo-classes ) : 

div:first-child {...} ~> اولین فرزند رو انتخاب میکند
div:last-child {...} ~> آخرین فرزند رو انتخاب میکند
div:first-of-type {...} ~> اولین فرزند یک پدر از جنس المنت مورد نظر 
div:last-of-type {...} ~> آخرین فرزند یک پدر از جنس المنت مورد نظر  div
div:only-child {...} ~> درصورتی فرزند انتخاب میشود که تک فرزند المنت پدر باشد

شاید درک مورد only-child کم سخت باشه برای همین به مثال زیر دقت کنید :

ساختار HTML مثال only-child
ساختار HTML مثال only-child
ساختار CSS مثال only-child
ساختار CSS مثال only-child

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

۵ ـ ۵ : سلکتور های شبه کلاس مربوط به اعداد و عبارات : ( Numbers & Expressions Pseudo-classes ) :

۱ . elm:nth-child(n) HTML
۲ . elm:nth-child(an)
۳ . elm:nth-child(n+b)
۴ . elm:nth-child(an+b)
۵ . elm:nth-child(an-b)
  • ۵ ـ ۵ ـ ۱ : مستقیما فرزند n ام انتخاب میشود
  • ۵ ـ ۵ ـ ۲ : فرزند های مضرب an انتخاب میشوند
  • ۵ ـ ۵ ـ ۳ : در اینجا یکم داستان فرق میکنه در اینجا با توجه به مقدار b از خود b به بعد فرزندان انتخاب میشوند به عنوان مثال :
li:nth-child(n + 4) ~> لیست آیتم های  ۴ به بعد انتخاب میشوند
  • ۵ ـ ۵ ـ ۴ : در اینجا N از صفر شروع شده و بعد از ضرب در a با مقدار b جمع شده و فرزندان منتخب محاسبه میشوند به عنوان مثال :
li:nth-child(4n+7) : (4×0)+7, (4×1)+7, (4×2)+7 =  فرزندان ۷ و ۱۱ و ۱۵ انتخاب میشوند

۵ ـ ۵ ـ ۵: در اینجا نیز N از صفر شروع شده و بعد از ضرب در a مقدار b از آن کم شده و فرزندان منتخب محسابه میشوند به عنوان مثال :

li:nth-child(6n-4) : (6×0)-4, (6×1)-4, (6×2)-4 =  فرزندان ۲ و ۸ و ۱۴ انتخاب میشوند

۵ ـ ۶ : سلکتور شبه کلاس تهی : ( Empty Pseudo-class ) :

المنت هایی انتخاب میشوند که درون آنها یا خالی باشه یا فقط کامنت درونشون باشه فقط نکته قابل توجه این است که space یا tab تهی محسوب نمیشونهد از آن جایی که از جنس استرینگ هستند به عنوان مثال : 

#post span:empty {...}

<section id=&quotpost&quot>
    <span></span> ~> این انتخاب میشه
    <span> </span>  ~> این انتخاب نمیشه فاصله
    <span><!-- تست --></span> ~> این انتخاب میشه
</section>

۵ ـ ۷ : سلکتور شبه کلاس نفی‌ : ( Negation Pseudo-class ) :

این سلکتور فیلتر نفی میکنه و المنت هایی که درون ( ()not: ) ذکر شدن رو انتخاب نمیکنه

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

li:not(.li-elements) {...} ~> لیست آیتم هایی که فاقد کلاس ذکر شده اند 
ul li:not(:nth-child(2n)) {...} ~> لیست آیتم هایی که مضرب ۲ نیستند انتخاب میشوند
ساختار HTML مثال ترکیبی not , nth-child
ساختار HTML مثال ترکیبی not , nth-child
ساختار CSS مثال ترکیبی not , nth-child
ساختار CSS مثال ترکیبی not , nth-child


۵ ـ ۸ : سلکتور های شبه المنت مربوط به متن : ( Textual Pseudo-elements ) :

element::after {...} ~> با استفاده از این سلکتور یک شبه المنت به آخر المنت سلکت شده اضافه میشود که میتواند استایل و محتوا بگیرد معمولا برای اضافه کردن انیمیشن و آیکون و در حال تزیینات استفاده میشود
element::before {...} ~> مانند افتر است با این تفاوت که شبیه المنت را به اول المنت انتخاب شده اضافه میکند
element::first-letter {...} ~> اولین کاراکتر متن محور درون المنت مورد نظر انتخاب میشود استفاده از این مورد رو باید اکثرا در سایت های نشریات دیده باشید 
element::first-line {...} ~> اولین خط پاراگراف المنت مورد نظر رو انتخاب میکنه
element::placeholder {...} ~> اگه المنت مورد نظر دارای پلیس هولدر باشه انتخاب شده و میتوان بهش استایل بدید 
element::selection {...} ~> وقتی تکستی رو توی یک وب پیج انتخاب میکنید قسمت انتخاب شده یک رنگ 
 و یک پس زمینه دارد اگه دقت کرده باشید بسته به یوزر ایجنت سیستم عامل و رنگ اکسنت یک حالت دیفالت داره مثلا فکر کنم دیفالت ویندوز آبی سفید است اوبونتو نارنجی سفید و مک او اس سفید و رنگ اکسنت انتخاب شده در تنظیمات است اما بعضی وبسایت ها فرق میکنه از موضوع اصلی دور نشیم نهایت قضیه این هست که این رنگ قابل تعویضه و این کار با استفاده از این سلکتور انجام پذیره
به عنوان مثال اگه به خود ویرگول نگاه کنید

:selection{ 
     background:#0f94e9;
     color:#fff 
} 

استفاده کرده