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

۳۴۶ بازدید
آخرین به‌روزرسانی: ۱۲ شهریور ۱۴۰۲
زمان مطالعه: ۹ دقیقه
شبه کلاس و شبه عنصر در CSS — آموزش CSS (بخش نهم)

در بخش قبلی این سری مقالات (+) در مورد سلکتورهای خصوصیت با شما صحبت کردیم. دسته دیگری از سلکتورها که در این مقاله مورد بررسی قرار خواهیم داد، شامل شبه کلاس (pseudo-classes) و شبه عنصر (pseudo-elements) است. تعداد زیادی از این دست سلکتورها وجود دارند و عموماً هر کدام مقصود مشخصی دارند. زمانی که با شیوه استفاده از آن‌ها آشنا شوید، می‌توانید فهرست مربوط را بگردید و ببینید آیا مورد خاصی که به کارتان بیاید وجود دارد یا نه. در این زمینه مراجعه به صفحه MDN هر سلکتور و بررسی وضعیت پشتیبانی مرورگرهای مختلف از آن نیز مفید خواهد بود. برای مطالعه بخش قبلی مجموعه مقالات آموزش 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 نگاه کنید تا ببینید که چه چیزی به سند اضافه می‌کند.

بخش پایانی

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

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

شبه کلاس‌ها

 

سلکتورتوضیح
active:هنگامی که کاربر فعالیتی روی یک عنصر انجام می‌دهد، مثلاً روی آن کلیک می‌کند، تطبیق می‌یابد.
any-link:با هر دو حالت link: و visited: لینک تطبیق می‌یابد.
blank:با یک عنصر <input> که مقدار آن خالی باشد، تطبیق می‌یابد.
checked:یا یک دکمه رادیویی یا چک‌باکس در حالت انتخاب‌شده، تطبیق می‌یابد.
current:با یک عنصر یا جد (والد و والدِ والد و ...) عنصر که در حال نمایش است، تطبیق می‌یابد.
default:با یک یا چند عنصر UI که در میان مجموعه‌ای از عناصر مشابه، پیش‌فرض هستند، تطبیق می‌یابد.
dir:عنصری را بر مبنای جهت آن یعنی مقدار خصوصیت dir در HTML یا مشخصه direction در CSS تطبیق می‌دهد.
disabled:با آن عناصر رابط کاربری تطبیق می‌یابد که در حالت غیرفعال باشند.
empty:با عنصری تطبیق می‌یابد که فرزندی به جز احتمالاً فاصله خالی نداشته باشد.
enabled:با آن دسته از عناصر رابط کاربری تطبیق می‌یابد که در حالت فعال هستند.
first:در «رسانه صفحه‌بندی شده» (Paged Media) با صفحه نخست تطبیق می‌یابد.
first-child:با عنصری تطبیق می‌یابد که در میان هم‌نیاهای خود، اول باشد.
first-of-type:با عنصری تطبیق می‌یابد که در میان هم‌نیاهای خود از یک نوع مشخص، اول باشد.
focus:با عنصری تطبیق می‌یابد که فوکوس صفحه را در اختیار داشته باشد.
focus-visible:هنگامی تطبیق می‌یابد که عنصری فوکوس داشته باشد و این فوکوس برای کاربر نمایان باشد.
focus-within:با عنصری که فوکوس داشته باشد و همچنین عنصری که فوکوس را از دست داده است، تطبیق می‌یابد.
future:با عناصر پس از عنصر کنونی تطبیق می‌یابد.
hover:زمانی تطبیق می‌یابد که کاربر اشاره‌گر ماوس را روی عنصر ببرد.
indeterminate:با آن دسته از عناصر UI تطبیق می‌یابد که در حالت تعیین نشده باشند، مثلاً چک‌باکس‌ها می‌توانند چنین حالتی داشته باشند.
in-range:با عنصری تطبیق می‌یابد که دارای بازه‌ای باشد و مقدار واردشده در آن بازه باشد.
invalid:با عنصری مانند <input> تطبیق می‌یابد که در حالت نامعتبر باشد.
lang:با یک عنصر بر مبنای زبان (مقدار خصوصیت lang در HTML) تطبیق می‌یابد.
last-child:با عنصری که در میان هم‌نیاهای خود آخر باشد، تطبیق می‌یابد.
last-of-type:با عنصری تطبیق می‌یابد که در میان همنوعان خود آخر باشد.
left:در «رسانه صفحه‌بندی شده» (Paged Media) با صفحه‌های سمت چپ تطبیق می‌یابد.
link:با لینک‌های بازدید نشده تطبیق می‌یابد.
local-link:با لینک‌هایی تطبیق می‌یابد که به صفحه‌هایی اشاره می‌کنند که در همان سایت مربوط به صفحه کنونی قرار دارند.
()is:با هر کدام از سلکتورها در لیست سلکتور که به آن ارسال شود، تطبیق می‌یابد.
not:با چیزهایی تطبیق می‌یابد که از سوی سلکتورهایی که به عنوان مقدار این سلکتور ارسال شده‌اند تطبیق نیافته‌اند.
nth-child:با عنصری از لیست هم‌نیاها تطبیق می‌یابد. هم‌نیاها با فرمولی به شکل an+b تطبیق می‌یابند. برای نمونه 2n+1 با عناصر 1، 3، 5، 7 و غیره تطبیق می‌یابد که شامل عناصر فرد می‌شود.
nth-of-type:با عناصری از لیست هم‌نیاها که از نوع خاصی هستند (برای نمونه عناصر <p>) تطبیق می‌یابد. هم‌نیاها با فرمولی به شکل an+b تطبیق می‌یابند، یعنی 2n+b می‌تواند با آن نوع از عناصر، به شماره‌های 1، 3، 5، 7 و غیره یعنی شماره‌های فرد تطبیق یابد.
nth-last-child:با عنصری از لیستی از هم‌نیاها تطبیق می‌یابد که از انتها به اول شمرده می‌شوند و فرمولی به شکل an+b دارند. برای مثال n2+1 با عنصر آخر یک دنباله، سپس عنصر دو تا به آخر مانده و سپس دو عنصر ماقبل آن و همین‌طور تا اول تطبیق می‌یابد. بدین ترتیب همه عناصر با شماره‌های فرد با شمارش از آخر به اول تطبیق می‌یابند.
nth-last-of-type:با عناصری از لیست هم‌نیاها که از نوع خاصی هستند (مثلاً عناصر <p>) تطبیق می‌یابد که از آخر به اول شمرده می‌شوند. هم‌نیاها با فرمول an+b شمرده می‌شوند. برای نمونه 2n+1 با عنصر آخر از آن نوع خاص در دنباله و سپس عنصر دو تا مانده به آخر و عنصر دو تا مانده به قبلی و همین‌طور تا اول تطبیق می‌یابد. به این ترتب همه عناصر فرد با شمارش از آخر به اول تطبیق می‌یابند.
only-child:با عنصری که هیچ هم‌نیا ندارد تطبیق می‌یابد.
only-of-type:با عنصری که تنها مورد از نوع خود در میان هم‌نیاها باشد تطبیق می‌یابد.
optional:با عناصری که الزامی نیستند، تطبیق می‌یابد.
out-of-range:با عنصری دارای بازه تطبیق می‌یابد که مقدار ورودی خارج از بازه مورد نظر باشد.
past:با عنصری تطبیق می‌یابد که قبل از عنصر کنونی قرار دارد.
placeholder-shown:با یک عنصر ورودی که متن placeholder را نمایش می‌دهد تطبیق می‌یابد.
playing:با عنصری تطبیق می‌یابد که یک منبع صوتی، ویدئویی یا مشابه را نمایش می‌دهد و قابلیت پخش شدن یا مکث یافتن را دارد و اینک به صورت «در حال پخش» (playing) درآمده است.
paused:با عنصری تطبیق می‌یابد که یک منبع صوتی، ویدئویی یا مشابه را نمایش می‌دهد و قابلیت پخش شدن یا مکث یافتن را دارد و اینک به صورت «در حال مکث» (paused) درآمده است.
read-only:با عنصری تطبیق می‌یابد که قابلیت دستکاری از سوی کاربر ندارد.
read-write:با عنصری تطبیق می‌یابد که قابلیت دستکاری از سوی کاربر را دارد.
required:با عنصری تطبیق می‌یابد که الزامی باشد.
right:در «رسانه‌های صفحه‌بندی شده» (Paged Media) با صفحه‌های سمت راست تطبیق می‌یابد.
root:با عنصری تطبیق می‌یابد که ریشه سند باشد.
scope:با عنصری تطبیق می‌یابد که دارای دامنه است.
valid:با عنصری مانند یک عنصر <input> تطبیق می‌یابد که در حالت معتبر باشد.
target:با عنصری تطبیق می‌یابد که هدف URL جاری باشد، یعنی یک ID مطابق بخش URL جاری داشته باشد.
visited:با لینک‌های بازدید شده تطبیق می‌یابد.

شبه عناصر

سلکتورتوضیح
after::با یک عنصر استایل‌پذیر که پس از محتوای واقعی عنصر مبدأ می‌آید، تطبیق می‌یابد.
before::با یک عنصر استایل‌پذیر که پیش از محتوای واقعی عنصر مبدأ می‌آید، تطبیق می‌آید.
first-letter::با حرف نخست عنصر تطبیق می‌یابد.
first-line::با خط نخست عنصر مشمول تطبیق می‌یابد.
grammar-error::با بخشی از سند که شامل خطای گرامری است و از سوی مرورگر علامت‌گذاری شده، تطبیق می‌یابد.
selection::با بخشی از سند که انتخاب شده است، تطبیق می‌یابد.
spelling-error::با بخشی از سند که شامل یک خطای املایی است و از سوی مرورگر علامت‌گذاری شده است، تطبیق می‌یابد.

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

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

==

بر اساس رای ۳ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
۱ دیدگاه برای «شبه کلاس و شبه عنصر در CSS — آموزش CSS (بخش نهم)»

آقا عااالی دمتون گرم مرسی

نظر شما چیست؟

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