CSS – شبه‌عنصر (Pseudo-element)

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

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

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

selector::pseudo-element {
  property: value;
}

نکته: در CSS3 از :: برای تعریف عناصر شبه استفاده می‌شود، در حالی که در CSS2 و CSS1 از : استفاده می‌شد. برای پشتیبانی از نسخه‌های قدیمی‌تر، استفاده از : همچنان قابل قبول است.

عنصر شبه ::first-line

عنصر شبه ::first-line برای اعمال استایل خاص به اولین خط متن استفاده می‌شود. به عنوان مثال:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

نکات:

  • فقط می‌توان این عنصر شبه را به عناصر سطح بلوک (block-level) اعمال کرد.
  • برخی از ویژگی‌هایی که می‌توانند به ::first-line اعمال شوند شامل ویژگی‌های مربوط به فونت، رنگ، پس‌زمینه، فاصله کلمات، ارتفاع خط و چند ویژگی دیگر هستند.

عنصر شبه ::first-letter

عنصر شبه ::first-letter برای استایل‌دهی به اولین حرف از یک متن استفاده می‌شود. به عنوان مثال:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

نکات:

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

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

عناصر شبه می‌توانند با کلاس‌های HTML ترکیب شوند. به عنوان مثال:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

در این مثال، اولین حرف پاراگراف‌هایی که کلاس intro دارند، قرمز و بزرگ‌تر نمایش داده می‌شوند.

استفاده همزمان از چندین عنصر شبه

می‌توان چندین عنصر شبه را همزمان با هم ترکیب کرد. به عنوان مثال:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

در این مثال، اولین حرف پاراگراف‌ها قرمز و بزرگ، و اولین خط به رنگ آبی و با استایل small-caps نمایش داده می‌شود.

عنصر شبه ::before

عنصر شبه ::before برای اضافه کردن محتوایی قبل از محتوای اصلی یک عنصر استفاده می‌شود. به عنوان مثال:

h1::before {
  content: url(smiley.gif);
}

در این مثال، یک تصویر قبل از محتوای هر عنصر <h1> قرار می‌گیرد.

عنصر شبه ::after

عنصر شبه ::after برای اضافه کردن محتوایی بعد از محتوای اصلی یک عنصر استفاده می‌شود. به عنوان مثال:

h1::after {
  content: url(smiley.gif);
}

در این مثال، یک تصویر بعد از محتوای هر عنصر <h1> قرار می‌گیرد.

عنصر شبه ::marker

عنصر شبه ::marker برای استایل‌دهی به نشانه‌گرهای آیتم‌های لیست استفاده می‌شود. به عنوان مثال:

::marker {
  color: red;
  font-size: 23px;
}

عنصر شبه ::selection

عنصر شبه ::selection برای استایل‌دهی به بخشی از متن که توسط کاربر انتخاب شده است استفاده می‌شود. به عنوان مثال:

::selection {
  color: red;
  background: yellow;
}

این استایل، متن انتخاب شده را قرمز و پس‌زمینه آن را زرد نمایش می‌دهد.

عناصر شبه در CSS به ما این امکان را می‌دهند تا به بخش‌های خاصی از یک عنصر دسترسی پیدا کرده و آن‌ها را به شکلی خاص استایل‌دهی کنیم، بدون اینکه تغییری در ساختار HTML ایجاد شود.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.