CSSطراحی سایتگوناگون

۲۱-شبه کلاس ها در CSS

از شبه کلاس ها به عنوان افکت دهی به بعضی از عناصر انتخاب شده استفاده میشود.

 

شبه کلاس ها در CSS

 

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

  • استایل دهی در هنگام قرار گرفتن موس روی عنصر مورد نظر(hover)
  • تفاوت میان لینک هایی که بازدید شده و یا بازدید نشده اند(visited)
  • استایل دهی برای فیلد های ورودی و … هنگامی که موس برای مقدار دهی روی آن قرار دارد(focus)

 

 

نحوه استفاده از شبه کلاس ها

 

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

 

نحوه نمایش لینک ها در css

  • توجه: برای تنظیم Styleهای یک لینک، به موارد زیر توجه فرمایید:
    1. a:hover باید بعد از a:link و a:visited آورده شود.
    2. a:active باید بعد از a:hover آورده شود.
    3. نام شبه کلاس، به حروف کوچک و بزرگ حساس است (case-sensitive)

 


 

ترکیب شبه کلاس ها با کلاس ها

 

  • اگر لینک مثال بالا دیده بشود یا به عبارتی روی آن کلیک شود، رنگ متن آن، قرمز نمایش داده خواهد شد.

 

 

 

شبه کلاس first-child

 

شبه کلاس first-child:، اولین فرزند یک عنصر را تطبیق می دهد.

 

 

تطبیق اولین عنصر <p>

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 

 

تطبیق اولین تگ <i>، داخل تمام تگ های <p>

 

 

 

مثال بیشتر-استفاده از شبه کلاس focus

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

 

 


بخش بعدی

بخش قبلی

 

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

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

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن