شبه کلاس و شبه عنصر در CSS — آموزش CSS (بخش نهم)

در بخش قبلی این سری مقالات (+) در مورد سلکتورهای خصوصیت با شما صحبت کردیم. دسته دیگری از سلکتورها که در این مقاله مورد بررسی قرار خواهیم داد، شامل شبه کلاس (pseudo-classes) و شبه عنصر (pseudo-elements) است. تعداد زیادی از این دست سلکتورها وجود دارند و عموماً هر کدام مقصود مشخصی دارند. زمانی که با شیوه استفاده از آن‌ها آشنا شوید، می‌توانید فهرست مربوط را بگردید و ببینید آیا مورد خاصی که به کارتان بیاید وجود دارد یا نه. در این زمینه مراجعه به صفحه MDN هر سلکتور و بررسی وضعیت پشتیبانی مرورگرهای مختلف از آن نیز مفید خواهد بود. برای مطالعه بخش قبلی مجموعه مقالات آموزش CSS می‌توانید روی لینک زیر کلیک کنید:

• سلکتورهای خصوصیت در CSS — آموزش CSS (بخش هشتم)

شبه کلاس چیست؟

شبه کلاس یک سلکتور است و عناصری که در حالت خاصی هستند را انتخاب می‌کند.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

مثلاً ممکن است این عناصر نخستین عنصر در نوع خود باشند یا این که اشاره‌گر ماوس روی آن‌ها قرار گرفته باشد. آن‌ها به طور معمول طوری عمل می‌کنند گویی یک کلاس را روی بخشی از سند اعمال کرده‌اید و غالباً به کاهش تعداد کلاس‌ها در markup کمک می‌کنند. همچنین استفاده از شبه کلاس موجب پدید آمدن کد انعطاف‌پذیر و قابل نگهداری می‌شود. شبه کلاس‌ها با کلیدواژه Pseudo-classes و یک دونقطه آغاز می‌شوند:

:pseudo-class-name

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

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

با این حال نگهداری کد فوق می‌تواند سخت باشد، چون اگر پاراگراف جدیدی به ابتدای سند اضافه شود همه چیز به هم می‌ریزد. در این حالت باید کلاس را به پاراگراف جدید ببریم. با توجه به این مشکل باید به جای افزودن یک کلاس از سلکتور شبه کلاس به نام:first-child استفاده کنیم. این کلاس همواره نخستین عنصر فرزند را در مقاله انتخاب می‌کند و بدین ترتیب دیگر نیازی به ویرایش HTML نداریم. البته این روش شاید همیشه ممکن نباشد، چون ممکن است کد CSS از سوی CMS تولید شده باشد.

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

• :last-child
• :only-child
• :invalid

شبه کلاس User-action

برخی شبه کلاس‌ها تنها زمانی به کار می‌روند که کاربر به طریقی با سند تعامل داشته باشد. این شبه کلاس‌های User-action گاهی اوقات به نام شبه کلاس‌های دینامیک نیز نامیده می‌شوند. آن‌ها طوری عمل می‌کنند گویی هنگامی که کاربر با عنصری تعامل می‌یابد، یک کلاس به آن اضافه می‌شود. مثال‌های آن به شرح زیر هستند:

• hover: – چنان که پیش‌تر اشاره کردیم تنها زمانی اعمال می‌شود که کاربر اشاره‌گر ماوس خود را روی یک عنصر که به طور معمول لینک است، ببرد.
• focus: – تنها زمانی اعمال می‌شود که کاربر با استفاده از کنترل‌های کیبورد فوکوس صفحه را روی یک عنصر ببرد.

شبه عنصر چیست؟

شبه عنصر (pseudo-element) به روشی مشابه شبه کلاس عمل می‌کند، اما طرز عمل آن به گونه‌ای است که گویا به جای اعمال یک کلاس به عناصر موجود، یک عنصر آ به صورت کامل به markup اضافه کرده‌اید. شبه عناصر با یک دونقطه دوبل (::) آغاز می‌شوند:

::pseudo-element-name

نکته: برخی شبه عناصر اولیه با ساختار دونقطه‌ی منفرد (:) نیز استفاده می‌شدند و از این رو ممکن است گاهی اوقات در کدها یا مثال‌های مختلف با آن‌ها مواجه شوید. مرورگرهای مدرن برای حفظ تطبیق‌پذیری رو به عقب از شبه عناصر اولیه در هر دو حالت دونقطه منفرد و دوبل پشتیبانی می‌کنند.

برای نمونه اگر بخواهیم خط نخست یک پاراگراف را انتخاب کنیم، می‌توانیم آن را درون یک عنصر <span> قرار دهیم و از سلکتور عنصر استفاده کنیم، اما این حالت در صورتی که تعداد کلمه‌هایی که باید پوشش یابند بیش یا کمتر از عرض عنصر والد باشد، موفق نخواهد بود. از آنجا که در اغلب موارد نمی‌دانیم چه تعداد کلمه در یک خط جای می‌گیرند و در صورت تغییر عرض صفحه این تعداد تفاوت خواهد داشت، امکان اضافه کردن این قابلیت به صورت پایدار به HTML ناممکن است.

سلکتور شبه عنصر first-line:: این کار را به صوت مطمئنی برای ما انجام می‌دهد. به این ترتیب اگر تعداد کلمه‌های خط اول کاهش یا افزایش پیدا کند، این شبه عنصر همچنان خط اول را انتخاب خواهد کرد.

این شبه عنصر طوری عمل می‌کند گویی یک <span> به صورت جادویی پیرامون خط قالب‌بندی شده اول قرار گرفته است و هر بار که طول آن تغییر می‌یابد، به‌روزرسانی می‌شود. می‌توانید ببینید که این شبه عنصر خط اول هر دو پاراگراف را انتخاب می‌کند.

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

اگر بخواهیم خط اول نخستین پاراگراف را به صورت bold دربیاوریم، می‌توانیم به صورت ترکیبی از سلکتورهای first-child: و first-line:: همزمان استفاده کنیم. تلاش کنید مثال قبلی را ویرایش کرده و از CSS زیر استفاده کنید. می‌خواهیم خط نخست پاراگراف نخست <p> را انتخاب کنیم که درون یک عنصر <article> قرار دارد.

1article p:first-child::first-line { 
2  font-size: 120%; 
3  font-weight: bold; 
4}

محتوای تولید شده با before:: و after::

چندین شبه عنصر خاص وجود دارند که همراه با مشخصه content برای درج محتوا درون سند با استفاده از CSS استفاده می‌شوند. از این موارد می‌توان برای درج یک رشته متنی مانند آن چه در مثال زیر می‌بینید، استفاده کرد. تلاش کنید مقدار متن مشخصه content را تغییر دهید و تغییر را در خروجی ببینید. همچنین می‌توانید شبه عنصر before:: را به شبه عنصر after:: تغییر داده و ببینید که متن به جای ابتدا در انتهای عنصر درج می‌شود.

با این حال درج کردن رشته متنی از CSS، کاری نیست که بخواهیم به طور مکرر در وب انجام دهیم، چون این متن برای برخی نرم‌افزارهای قرائت صفحه غیر قابل دسترسی است و خواندن و ویرایش کردن آن ممکن است در آینده برای افراد دشوار باشد. استفاده بهتر از این شبه عناصر برای درج آیکون است. برای نمونه در کد زیر یک فلش کوچک به انتهای متن اضافه شده است که یک نشانگر بصری است که نمی‌خواهیم از سوی نرم‌افزار قرائت صفحه خوانده شود:

این شبه عناصر به طور مکرر برای درج یک رشته خالی نیز استفاده می‌شوند و در این صورت می‌تواند مانند هر عنصر دیگری در صفحه استایل‌بندی شوند. در مثال بعدی دو رشته خالی با استفاده از شبه عنصرهای before:: و after:: اضافه می‌کنیم. ما این دو را به صورت display: block تنظیم می‌کنیم و به این ترتیب می‌توانیم عرض و ارتفاع آن‌ها را استایل‌بندی کنیم. سپس از CSS برای استایل‌بندی آن‌ها مانند عناصر دیگر بهره می‌گیریم. می‌توانید با CSS کار کنید و ظاهر و رفتار آن‌ها را تغییر دهید.

استفاده از شبه عناصر before:: و after:: همراه با مشخصه content تحت عنوان «محتوای تولید شده» (Generated Content) در CSS نامید می‌شود و در اغلب موارد می‌توانید استفاده از این تکنیک را در جاهای مختلف در CSS ببینید. یک مثال عالی از این تکنیک وب‌سایت cssarrowplease (+) است که امکان ساخت فلش‌های مختلف را با استفاده از CSS فراهم می‌سازد. در هنگامی که فلش خود را می‌سازید به CSS توجه کنید تا ببینید که چگونه از شبه عناصر :before:: و after:: استفاده می‌کند. هر زمان که این سلکتورها را ببینید به مشخصه content نگاه کنید تا ببینید که چه چیزی به سند اضافه می‌کند.

بخش پایانی

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در ادامه جدولی از این موارد می‌بینید که به صفحه‌های مرجع آن‌ها در وب‌سایت MDN لینک دارند. از این مرجع می‌توانید برای بررسی چیزی که به دنبالش هستید استفاده کنید.

شبه کلاس‌ها

شبه عناصر

بدین ترتیب به پایان این مقاله می‌رسیم. برای مطالعه بخش بعدی از این سری مقالات روی لینک زیر کلیک کنید:

• Combinator در CSS --- آموزش CSS (بخش دهم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی وب با CSS
• مفاهیم آبشار و وراثت در CSS — آموزش CSS (بخش پنجم)
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی

==