25 تا از css selector های جذاب و کاربردی

آنچه خواهید دید :

افرادی هستند که CSS را به طور کامل بلدند ولی از سلکتور های آن فقط در حد مقدماتی و ابتدایی میدانند و به آن ها اکتفا می کنند و این کار کاملا اشتباه است و هدف ما از این مقاله یادگیری 25 مورد از css selector ها است.

CSS selector چیست؟

همانطور که از این اسم معلوم است بخشی از یک بخش HTML را اتنخاب میکند و ما میتوانیم به آن بخش استایل بدهیم

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

<p class="class-test"id="id-test">hello world</p>

CSS Selectors: روش های انتخاب کردن یک تگ

در واقع از 5 روش میتوان یک بخش بخصوص را سلکت نمود.

انتخاب با Tag

p {
    color: blue;
    text-align: center;
}

در کد بالا ما تمام تگ های p که در صفحه HTML است را صدا زدیم ولی راه هایی است که بگوییم مثلا پنجمین تگ p که در ادامه با آن آشنا می شویم.

انتخاب با Class

.class-text {
    color: blue;
    text-align: center;
}

در کد بالا ما دقیقا همان کاری را کردیم که در کد اول انجام داده بودیم ولی با این تفاوت که بجای سلکت کردن تمام تگ های p فقط تگ هایی که این class را داشتند سلکت کردیم.

انتخاب با ID

#id-text {
    color: blue;
    text-align: center;
}

ما باز هم در کد بالا کار کد اول و دوم را انجام دادیم با این حال که وقتی چیزی را با id صدا میزنیم فقط یک تگ سلکت می شود درواقع id مانند کد ملی است و فقط مختص به یک تگ است.

انتخاب با attribute

div["data-website='megademy.ir'"] {
    color: blue;
    text-align: center;
}

ما در این کد باز هم همان کار را انجام دادیم ولی با این نوع سلکت کردن تگ div ای که دارای megademy.ir در data attribute است را انتخاب کردیم.

انتخاب با Psuedo Selector

div:hover {
   text-color: red;
}

در نوع سلکتور، وقتی که با موس روی المنت div برویم، رنگش تغییر میکند. درباره این سلکتور بیشتر بخوانید.

نکته: در نهایت یک نوع انتخاب دیگر نیز وجود دارد.

انتخاب با Star Selector

* {
  font-size: 12px;
}

در این نوع، تمامی المنت های صحفه انتخاب می شوند و استایل های مربوطه به بر روی آنها اعمال می شود.

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

اما سلکت کردن همینجا تمام نمی شود.

همچنین شما میتوانید برای یادگیری بیشتر در مورد CSS، مقاله چگونگی تعریف متغیر ها در css را نیز بخوانید.

۲۵ نوع CSS Selector ها

همه تگ هایی که کلاس “className” را دارند انتخاب میکند	.className	.class
هم تگ هایی که کلاس className1 و هم تگ هایی که کلاس className2 را انتخاب میکند	.className1.className2	.class1.class2
همانطور که در بالا گفتیم id مانند کد ملی است و فقط یک تگ میتواند از آن استفاده کند و در این روش سلکت تنها تگی که دارای “id = “elementId باشد را انتخاب می کند	#elementId	#id
همه المنت های موجود در صفحه را انتخاب می کند	*	*
تمام المنت های p موجود در صفحه را انتخاب می کند	p	element
تمام المنت های p که دارای کلاس “className” باشد را انتخاب می کند	p.className	element.class
تمام div ها و تمام p های موجود در صفحه را انتخاب می کند	div, p	element, element
همه المنت های p که داخل تمامی div ها هستند را انتخاب می کند	div p	element element
*همه المنت های p که فقط فرزند div* باشند <div> <span> <p>...</p> <span> </div> مثلا در این کد، تگ p را انتخاب نمی کند**	div > p	element > element
اولین تگ p که بلافاصله بعد از تگ div باشد را انتخاب می کند	div + p	element + element

همه a هایی که مقدار href آنها “megademy.ir” است را انتخاب می کند	*a[href=”megademy.ir”]**	*[attribute=value]**
تمام a هایی که لینک فعال دارند را انتخاب می کند	a:active	:active
بعد از محتوای a چیزی درج می کند	a::after	::after
قبل از محتوای a چیزی درج می کند	a::before	::before
هر input که به صورت پیش فرض علامت خورده باشد (پارامتر checked را داشته باشد) را انتخاب میکند	input:cheched	:checked
اولین تگ a که در صفحه نوشته شده باشد و اولین a که فرزند هر تگی باشد را انتخاب می کند	a:first-child	:first-child
اولین تگ a که در صفحه نوشته شده باشد را انتخاب میکند	a:first-of-type	:first-of-type
input هایی که فوکوس شده باشند (روی انها کلیک شده باشد یا انتخاب شده باشند ) را انتخاب میکند شاید درست متوجه نشده باشید پس این صفحه را ببینید و خودتان امتحان کنید	input:focus	:focus
تمام a هایی که موس روی انها برود را انتخاب میکند ( هر وقت موس روی یکی از a ها رفت)	a:hover	:hover
اخرین تگ a که فرزند یک تگ باشد و اخرین تگ a در صفحه را انتخاب می کند	a:last-child	:last-child

اخرین تگ موجود در صفحه را انتخاب می کند	a:last-of-type	:last-of-type
تمام المان های صفحه را انتخاب می کند میدانم که درست متوجه نشده اید پس پیشنهاد میکنم خودتان امتحان کنید	:root	:root
همه a هایی که لینک هایشان دیده شده اند را انتخاب میکند پیشنهاد میکنم این را هم خودتان امتحان کنید	a:visited	:visited
هز تگ a که فرزند دوم یک نگ است را انتخاب می کند	a:ntn-child(4)	:nth-child(x)
چهارمین a نوشته شده در صفحه را انتخاب می کند	a:ntn-of-type(4)	:nth-of-type(x)

نتیجه گیری

در این مقاله روش های مختلف انتخاب کردن یک تگ در HTML را برسی کردیم و متوجه اهمیت دانستن انواع Selector ها شدیم. نسبت به Strcuture های مختلف، می توان از Selector های مختلفی استفاده کرد که روند استایل دهی برای ما بسیار ساده تر شود، خروجی بهتری داشته باشد و بعضاً باعث رعایت قانون DRY می شود.