عناصر شبه در 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 ایجاد شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام