آموزش کامل شبه کلاس ها در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل شبه کلاس ها در CSS با من همراه باشید.

آموزش کامل شبه کلاس ها در CSS

Free-Learn

آموزش کامل شبه کلاس ها در CSS

شبه کلاس ها یا به انگلیسی Pseudo Classes در CSS برای تعریف یک حالت خاص از یک عنصر می باشد، این حالت خاص که میگم مثلا میتونه موقع رفتن ماوس بروی یک عنصر باشد و یا مثلا موقع کلیک ماوس بروی یک عنصر.

شبه کلاس ها میتوانند موارد زیر باشند :

  • وقتی ماوس بروی یک عنصر برود
  • وقتی ماوس بروی یک عنصر فوکوس کند
  • برای انتخاب فرزند خاصی از یک عنصر
  • برای تعریف استایل برای لینک های درون یک صفحه
  • برای انتخاب نشدن یک عنصر (یعنی مثلا بقیه انتخاب بشن ولی فلان عنصر انتخاب نشود)
  • و …

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

Free-Learn

لیست کامل شبه کلاس ها در CSS

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

برای مشاهده مثال آنلاین هر یک از شبه کلاس های موجود در جدول زیر لطفا بروی دکمه مثال کلیک نمایید.

شبه کلاس (انتخابگر) توضیح مثال
:active لینک فعال را انتخاب میکند. (دقیقا لحظه کلیک ماوس بروی یک لینک) مثال
:focus لحظه فوکوس کردن ماوس بروی یک عنصر را مشخص میکند. مثال
:hover برای وقتی که ماوس بروی یک عنصر می رود. مثال
:link لینک هایی را که هنوز روشون کلیک نشده را انتخاب میکند. مثال
:visited انتخاب میکند لینک هایی را که روشون کلیک شده.
(لینک های دیده شده)
مثال
:checked عنصری که تیک خورده را انتخاب میکند. مثال
:enabled عنصری که فعال می باشد را انتخاب میکند. مثال
:disabled عنصری که غیرفعال می باشد را انتخاب میکند. مثال
:empty انتخاب میکند عنصری را که هیچ فرزندی ندارد. مثال
:first-child اولین فرزند از یک عنصر را انتخاب میکند. مثال
:last-child آخرین فرزند از یک عنصر را مشخص میکند. مثال
:first-of-type اولین هم نوع یک عنصر را انتخاب میکند. مثال
:last-of-type آخرین هم نوع یک عنصر را انتخاب میکند. مثال
:in-range انتخاب یک عنصر در یک محدوده مشخص. مثال
:out-of-range انتخاب یک عنصر وقتی از یک محدوده مشخص بیرون بزند. مثال
:valid انتخاب کن عناصری را که مقدارشون معتبر می باشد. مثال
:invalid برای وقتی که مقدار یک عنصر معتبر نباشد. مثال
:lang(language) انتخاب یک عنصر با زبان خاص (با استفاده از صفت lang)
( لیست کد زبان های دنیا )
مثال
:not(selector) داره میگه انتخاب نکن فلان عنصر را. مثال
:nth-child(n) انتخاب فرزند خاصی از یک عنصر (انتخاب از طریق عدد) مثال
:nth-last-child(n) انتخاب از آخرین فرزندان یک عنصر (انتخاب از طریق عدد) مثال
:nth-last-of-type(n) انتخاب هم نوع از آخرین فرزندان یک عنصر (انتخاب از طریق عدد) مثال
:nth-of-type(n) انتخاب فرزندان یک عنصر با یک نوع (انتخاب از طریق عدد) مثال
:only-of-type انتخاب فقط یک نوع از فرزندان یک عنصر مثال
:only-child فقط عناصری را که تک فرزند هستند انتخاب میکند. مثال
:optional عناصری را که تکمیل کردنشان اختیاری است را انتخاب میکند.
(برای استفاده در فرمها)
مثال
:required انتخاب عناصری را که تکمیل کردنشان اجباری می باشد. مثال
:read-only انتخاب عناصری که فقط خواندنی هستند. مثال
:read-write انتخاب عناصری که فقط خواندنی نیستند. مثال
:root انتخاب ریشه یک صفحه وب (انتخاب تمامی عناصر) مثال
:target انتخاب لنگر مقصد از یک لینک
(معمولا برای استفاده در لینک های داخلی)
مثال

Free-Learn