مفهوم شبه کلاس‌ در CSS

 

درین گرد هم آیی از یادگرفتن مجانی HTML و CSS طراحی سایت در مشهد  به سراغ معنی شبه کلاس‌ها در CSS می رویم. شبه کلاس که به انگلیسی به آن Pseudo کلاس گفته می شود، معنی پیچیده‌ای وجود ندارد ولی در پباده سازی صفحه های اینترنت بسیار کاربردی میباشد. پس درین گردهمایی هم یاروهمدم ادمین‌تارنما باشید تا این معنی را کاملا تحلیل کنیم.

 

مضمون‌ شبه کلاس‌ در CSS

در جلسات قبل گفتیم که قادر خواهیم بود برای عنصرها، کلاس تمجید کنیم و به یاری یک (.) آنان را در CSS با اسم کلاس تعیین کنیم. از جمله box. همگی عناصری که دارنده کلاس box‌ می‌باشند را گزینش می‌نماید.

 

مضمون‌ شبه کلاس مانند کلاس وجود ندارد که بخواهیم برای هر عنصر آن را تمجید کنیم. شبه کلاس‌ها در CSS امداد می‌نمایند وضعیت خاصی از یک عنصر را تعیین کنیم. یا این که یک عنصر را در شرایط مشخصی گزینش کنیم.

 

به عنوان مثال فرض نمائید در یک لیست می خواهیم موادتشکیل دهنده لیست را گزینش کنیم. به امداد li خواهیم توانست همگی موادسازنده لیست را تعیین کنیم، البته در صورتی‌که تنها غرض ما گزینش او‌لین عضو لیست باشد چه؟ بعد از شبه کلاس استعمال می کنیم:

 

 

1

2

3

li:first-child {

    background: red;

}

شبه کلاس first-child: تنها li ای را تعیین می‌نماید که عضو نخستین میباشد. در حالتی که از دو نقطه اولِ آن متعجب گردیده‌اید بهتر میباشد به سراغ نظارت ساختار و نحو آن‌ها برویم.

 

نحو (Syntax) شبه کلاس‌ها در CSS

 

1

2

3

selector:pseudo-class {

  property: value;

}

کافیست نخست یک عنصر را با هر روشی که می دانید گزینش نمایید آنگاه به یاری نماد : از یک شبه‌کلاس برای معلوم کردن وضعیت خاص آن عنصر امداد بگیرید. منظورم از موقعیت خاص یکی‌از مورد ها ذیل میباشد:

 

تعیین یک عنصر که ماوس روی آن قرار گرفته

تعیین لینکی که به وسیله استفاده کننده کلیک گردیده

تعیین فرزند چندم از یک والد

و….

 

مهم‌ترین Pseudo کلاس‌ها

در شرایطی که تا به اینجا پاره ای سردرگم می باشید و می پندارید چیزی متوجه نشده‌اید به طور کاملً طبیعی میباشد!! چندین نصیب بعدی مورد را به خیر برایتان جا می‌اندازد!

 

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

می خواهیم وقتی که استفاده کننده موشواره را روس عنصر خاصی قرار بخشید، آن عنصر یک استایل نو داشته باشد. برای مثال کد تحت منجر میگردد رنگ پس‌قضیه تگ a بعداز قرار دریافت کردن موشواره، رنگ آن به آبی رنگ تیره‌خیس تغییر‌و تحول ‌نماید.

 

 

1

2

3

a:hover {

  background-color: #138496;

}

برای مشاهده فیض موشواره خویش را روی دکمه مقابل قرار دهید.

 

شبه کلاس hover

 

معین کردن او‌لین عنصر والد

 

1

2

3

div span:first-child {

    color: blue;

}

عضو اولیه عضو دوم عضو سوم

 

همان گونه که مشاهده می کنید، عضو نخستین تعیین و رنگ دلخواه به آن داده شد.

 

 

بقیه شبه کلاس‌ها

دوستان عزیز می توانید هر کدام از کانال‌ کلاس‌های پایین را در CSS تست نمایید تا با مضمون‌ ظریف‌خیس آن آشنا گردید.

 

شبه کلاس مثال کاربرد

active a:active گزینش لینک و پیوند فعال (لحظه کلیک ماوس روی لینک و پیوند)

link a:link تعیین لینک و پیوند‌هایی که هنوز کلیک نشده‌اند.

visited a:visited گزینش لینک و پیوند‌هایی که از روی آن‌ها کلیک گردیده (چشم گردیده)

empty p:empty گزینش عنصری که هیچ فرزندی ندارد.

last-child li:last-child گزینش فرزند انتها یک تگ

()not ( p )not: تعیین نکردن این عنصر، در نمونه تعیین تمامی موادسازنده جز p

()nth-child (2n)nth-child گزینش فرزندان معین یک تگ، در نمونه فرزندان زوج

first-of-type p:first-of-type تعیین اولی عنصر نوع خاص در والد، مثال:تعیین اولی p در والد

last-of-type p:last-of-type گزینش نهایی عنصر نوع خاص در والد، نمونه: گزینش پایانی p والد

checked input:checked تعیین عنصری که تیک خورده (در گردهمایی فرم‌ها به آن می پردازیم)

focus input:focus تعیین فیلدی که ماوس روی آن فوکوس کرده (گردهمایی فرم‌ها)

تمرین: برای اینکه مطمئن گردید که مطالب فوق را به نیکی آموخته‌اید، به پرسش تحت جواب دهید.

در جدول بالا برخی از سطرها رنگ گردیده‌اند. در CSS این سطرها چه طور تعیین گردیده‌اند؟ در کامنت اسم شبه‌کلاس مربوطه را بنویسید.