0

مگادمیمگامگمقالاتHTML/CSS25 تا از css selector های جذاب و کاربردی

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

19 دی 1402
ارسال شده توسط
HTML/CSS ، برنامه نویسی ، مقالات
864 بازدید
CSSrs

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

 

CSS selector چیست؟

 

css-selectors

 

همانطور که از این اسم معلوم است بخشی از یک بخش 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 می شود.

 

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

دیدگاهتان را بنویسید