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 می شود.
کاربردی بود امیر علی
حس میکنم این 25 سلکتور و اون مقاله 25 المنت رو یک نفر نوشته هر جفتش خیلی خوبن عالی…..