09902090383

09337734689

تهران، خیابان شریعتی، خیابان معلم

resume.webbyme.ir

تلگرام طراحی سایت وب من

09902090383

09127363007

Top

آشنایی با انتخابگر Pseudo Class

Pseudo-classes

آشنایی با انتخابگر Pseudo Class

Pseudo Class

این انتخابگرها، کلاس هایی از css هستند selectorها با یک : که قبل از آنها می آیند معرفی می شوند.احتمالا تا اینجا با چند نمونه از این کلاس ها آشنا شده اید مثل hover:

CSS


a:hover {
/* Yep, hover is a pseudo class */
}

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

-انتخابگرهای مربوط به لینک

link: – در استفاده از این نوع انتخابگر توجه کنید، حتما مشخص کنید مربوط به کدام لینک ( تگ a ) است تا گیج نشوید.آیا همه تگ های a را می خواهید؟پس استفاده از این انتخابگر وقتی مفید است که مشخص کنید مربوط به کدام عنصر است.
visit: – لینک هایی که قبلا در مرورگر فعلی دیده شده اند را انتخاب می کند.
hover: – وقتی که مکان نما مونس را روی یک لینک نگه می دارید، آن را در حالت hover قرار می دهید و در این حالت به وسیله انتخابگر :hover انتخاب خواهند شد.
active: – لینک هایی که در حال فعال شدن هستند را انتخاب می کند ( وقتی روی یک لینک کلیک می کنید آن را در حالت active قرار می دهید )، برای مثال در حالت فشردن کلیه لینک ها شبیه button باشند.
متن روبرو یک تکنیک سرگرم کننده برای به خاطر سپردن تمام پیس کلاس های لینک است: LOVEHATE.

-انتخابگرهای مربوط به input

focus:- برای تعریف استایل حالت hover خیلی خوب است اما وقتی کاربر از صفحه کلید استفاده کند کار نخواهد کرد. focus: لینک هایی که در صفحه کلید focus شدند را انتخاب می کند.استفاده از این نوع کلاس ها فقط محدود به لینک ها نیست و می توانیم آنها را در inputها و textareaها هم استفاده کنیم.
:focus focus
سایر انتخابگرهای inputها که تا اینجا به بعضی از آنها اشاره شده است:

-انتخاب المان ها با توجه به موقعیتشان

  • root:
  • first-child:
  • last-child:
  • nth-child():
  • nth-of-type():
  • first-of-type:
  • last-of-type:
  • nth-last-of-type():
  • nth-last-child():
  • only-of-type:

Position

مقالات مرتبط

empty():
default():

after / before

مطالعه بیشتر

CSS Pseudo-classes

هیچ نظری وجود ندارد

ارسال نظر

CommentLuv badge