انتخابگرهای شبه‌عنصر

مقدمه

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

انتخابگرهای شبه‌عنصر

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

همانطور که می‌بینید، نام شبه‌عنصر مورد نظر بعد از یک جفت کاراکتر دونقطه (colon) آورده می‌شود. این سینتکسی است که در CSS3 معرفی شد و تا قبل از آن، همانند شبه‌کلاس‌ها از یک کاراکتر دونقطه برای شبه‌عنصرها استفاده می‌شد. جدول زیر لیست کامل شبه‌عناصر CSS را ارائه می‌دهد.

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

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

شبه عنصر filrst-line

شبه عنصر ::first-line همانطور که از نامش مشخص است، برای انتخاب خط اول عناصر block-level مانند پاراگراف‌ها کاربرد دارد. پس، با استفاده از این شبه‌کلاس می‌توانیم ترتیبی دهیم که خط اول عنصر یا عناصر مورد نظرمان با استایل متفاوتی نسبت به سایر خطوط نمایش داده شود. البته این کار را می‌توان بدون توسل به شبه‌عنصر ::first-line نیز انجام داد؛ به این ترتیب که خط اول عنصر یا عناصر مورد نظر را درون یک عنصر span با یک کلاس مشخص قرار دهیم و استایل مورد نظر را برای آن تعریف کنیم. اما مزیت استفاده از شبه‌عنصر ::first-line علاوه بر حفظ اختصار کدها و عدم نیاز به تعریف عناصر و کلاس‌های جدید، دینامیک بودن آن است. یعنی اگر به عنوان مثال، بعداً محتوای یک پاراگراف تغییر کند و متنی به ابتدای آن افزوده شود، انتخابگر ::first-line بروزرسانی شده و خط اول را بر اساس محتوای جدید انتخاب می‌کند.

به علاوه، با تغییر عرض پنجره‌ی مرورگر، طول خطوط تغییر می‌کند و شبه‌عنصر ::first-line خود را با عرض جدید تطبیق داده و در هر صورت، تنها خط اول را انتخاب می‌کند. در واقع، انتخابگر ::first-line طوری عمل می‌کند که گویی یک عنصر span جادویی خط اول را احاطه کرده و هر وقت که خط اول تغییر کند، به‌روزرسانی می‌شود. مثال زیر را ببینید.

CSS

p::first-line{
  color: blue;
  text-transform: uppercase;
}

در مورد شبه‌عنصر ::first-line دو نکته هست که باید مورد توجه قرار دهید. نکته‌ی اول اینکه این شبه‌عنصر تنها روی عناصر block-level قابل استفاده است و به‌کارگیری آن روی عناصر inline هیچ نتیجه‌ای به همراه ندارد. مثال زیر را ببینید.

CSS

*::first-line{
  color: blue;
  text-transform: uppercase;
}

اگر این مثال را اجرا کنید، خواهید دید که استایل‌های تعریف‌شده روی اولین خط و اولین حرف عناصر p و h2 عمال می‌شود اما روی عنصر span خیر. زیرا همانطور که گفتیم، شبه‌عنصر ::first-line تنها روی عناصر block-level کار می‌کند.

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

• همه‌ی پراپرتی‌های مربوط به فونت: font، font-kerning، font-style، font-variant، font-variant-numeric، font-variant-position، font-variant-east-asian، font-variant-caps، font-variant-alternates، font-variant-ligatures، font-synthesis، font-feature-settings، font-language-override>، font-weight، font-size، font-size-adjust، font-stretch و font-family.
• همه‌ی پراپرتی های مربوط به پس‌زمینه: background-color، background-image، background-clip، background-origin، background-position، background-repeat، background-size، background-attachment و background-blend-mode.
• پراپرتی color.
• پراپرتی‌های word-spacing، letter-spacing، text-decoration، text-decoration-color، text-decoration-line، text-decoration-style، text-transform، vertical-align و line-height.

در مثال زیر، از دو پراپرتی خارج از مجموعه پراپرتی‌های بالا به همراه شبه‌عنصر ::first-line استفاده شده که با هیچ نتیجه‌ای همراه نیستند. یکی از این پراپرتی‌ها margin-left است که برای ایجاد حاشیه از سمت چپ کاربرد دارد و دومی، پراپرتی text-indent است که برای ایجاد تورفتگی در ابتدای عنصر کاربرد دارد.

CSS

p::first-line{
  color: blue;
  text-transform: uppercase;
  margin-left: 20px;
  text-indent: 10px;
}

شبه‌عنصر first-letter

از شبه‌عنصر ::first-letter برای انتخاب اولین حرف از اولین خط عناصر block-level و تعریف یک استایل متفاوت برای آن حرف استفاده می‌شود. همانند آنچه در مورد شبه‌عنصر ::first-line نیز گفته شد، مزیت استفاده از شبه‌عنصر ::first-letter نسبت به سایر روش‌ها، دینامیک بودن این شبه‌عنصر است. مثال زیر را ببینید.

CSS

*::first-letter{
  color: white;
  background-color: black;
  font-size: 250%;
}

هر دو نکته‌ای که در مورد شبه‌عنصر ::first-line گفتیم، در مورد شبه‌عنصر ::first-letter نیز صادق است. یعنی اولاً همانطور که در مثال بالا هم دیده می‌شود، شبه‌عنصر ::first-letter تنها روی عناصر block-level قابل استفاده است و ثانیاً به همراه شبه‌عنصر ::first-letter نیز تنها تعداد کمی از پراپرتی‌های CSS قابل استفاده هستند. این پراپرتی‌ها عبارتند از:

• همه‌ی پراپرتی‌های مربوط به فونت
• همه‌ی پراپرتی‌های مربوط به پس‌زمینه
• همه‌ی پراپرتی های مربوط به حاشیه‌ها (margin, padding)
• همه‌ی پراپرتی‌های مربوط به قاب یا فریم عناصر (border)
• پراپرتی color.
• پراپرتی‌های text-decoration، text-shadow، text-transform، letter-spacing، word-spacing، line-height، text-decoration-color، text-decoration-line، text-decoration-style، box-shadow، float و vertical-align.

شبه‌عنصرهای spelling-error و grammar-error

کاربرد شبه‌عنصرهای ::spelling-error و ::grammar-error از نامشان مشخص است. اولی برای انتخاب بخشی از متن که به تشخیص مرورگر، دارای غلط املایی است و دومی برای انتخاب بخشی از متن که به تشحیص مرورگر، دارای غلط گرامری است، کاربرد دارند. البته این دو شبه‌عنصر فعلاً از پشتیبانی خوبی در مرورگرها برخوردار نیستند.

CSS

*::spelling-error{
  text-decoration: underline;
}

*::grammar-error{
  background-color: yellow;
}

در پاراگراف اول مثال بالا، واژه‌ی engineer با یک اشتباه املایی به صورت enginer نوشته شده و لذا توسط شبه‌عنصر ::spelling-error انتخاب می‌شود و در پاراگراف دوم به جای are از is استفاده شده و یک اشتباه گرامری تولید شده و بنابراین، واژه‌ی is توسط شبه‌عنصر ::grammar-error انتخاب می‌شود.

توجه داشته باشید که تنها پراپرتی‌های زیر را می‌توان به همراه شبه‌عنصرهای ::spelling-error و ::grammar-error به کار برد:

• پراپرتی‌های color، background-color، cursor، caret-color، outline، text-decoration، text-emphasis-color و text-shadow.

شبه‌عنصر selection

شبه‌عنصر ::selection که در اکثر مرورگرهای دسکتاپ پشتیبانی می‌شود، بخشی از سند را انتخاب می‌کند که توسط کاربر انتخاب (highlight) شده است. مثال زیر را ببینید.

CSS

::selection{
  color: gold;
  background-color: red;
}

p::selection{
  color: white;
  background-color: blue;
}

توجه داشته باشید که تنها پراپرتی‌هایی که می‌توان به همراه شبه‌عنصر ::selection به کار گرفت، عبارتند از:

• پراپرتی‌های color، background-color، text-decoration، text-shadow، stroke-color، fill-color و stroke-width.

شبه‌کلاس marker

شبه‌عنصر ::marker برای انتخاب مارکر یک آیتم لیست که معمولاً یک بالت (bullet) یا یک عدد است، کاربرد دارد. این شبه‌عنصر روی هر عنصر یا شبه‌عنصری که مقدار پراپرتی display آن برابر با list-item باشد (مثل عناصر li و summary)، کار می‌کند. مثال زیر را ببینید.

CSS

li::marker{
  color: red;
  font-size: 150%;
}

توجه داشته باشید که در حال حاضر، تنها پراپرتی‌های زیر را می‌توان به همراه شبه‌عنصر ::marker استفاده کرد:

• همه‌ی پراپرتی‌های مربوط به فونت.
• پراپرتی color
• پراپرتی white-space
• پراپرتی‌های text-combine-upright، unicode-bidi و direction
• پراپرتی content
• همه‌ی پراپرتی‌های مربوط به transition و animation

البته مطابق آنچه در مستندات مربوط به شبه‌عنصر ::marker آورده شده، در آینده پراپرتی‌های دیگری نیز به این لیست افزوده خواهد شد.

شبه‌کلاس‌های before و after

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

CSS

.exiting-test::before{
  content: '-->EXITING';
  color: green;
}

.boring-text::after{
  content: '<--BORING';
  color: red;
}

علت اینکه از لفظ «خاص» برای پراپرتی content استفاده کردیم این است که این پراپرتی تنها به همراه دو شبه‌عنصر before و after استفاده می‌شود و کاربرد دیگری ندارد و از طرف دیگر، تنها پراپرتی CSS است که مرز بین HTML و CSS را شکسته و آنها را با هم ترکیب می‌کند. به خاطر داشته باشید که از این پراپرتی باید تنها در صورتی استفاده کنیم که وجود یک بخش از محتوا، بخشی از پروسه‌ی طراحی قلمداد شود و عدم نمایش احتمالی این محتوا مشکلی به وجود نیاورد.