پseudo-element CSS

پseudo-element چیست؟

pseudo-element CSS برای تنظیم سبک بخش خاصی از عنصر استفاده می‌شود.

مثلاً می‌توان از آن برای:

  • سبک اولین حرف و اولین خط عنصر را تنظیم می‌کند
  • محتوای قبل یا بعد از محتوای عنصر را قرار می‌دهد

نحوه استفاده

نحوه استفاده از پseudo-element:

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

عنصر مخفی ::first-line

::first-line پseudo-element برای افزودن سبک خاص به اولین خط متن استفاده می‌شود.

در این مثال، سبک اولین خط همه عناصر <p> را تنظیم می‌کند:

مثال

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

آزمایش کنید

توجه داشته باشید:::first-line پseudo-element فقط می‌تواند برای عناصر بلوک اعمال شود.

ویژگی‌های زیر برای پseudo-element اعمال می‌شوند: ::first-line پseudo-element:

  • ویژگی‌های فونت
  • ویژگی‌های رنگ
  • ویژگی‌های پس‌زمینه
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

لطفاً توجه داشته باشید:نقطه دوگانه - ::first-line مقایسه :first-line

در CSS3، دو نقطه جایگزین نقطه یکتای پseudo-element شده‌اند. این کوشش W3C برای تفاوت‌گذاریpseudo-classوپseudo-elementتلاش‌ها.

در CSS2 و CSS1، pseudo-class و pseudo-element از نقطه یکتا استفاده می‌کنند.

برای سازگاری با گذشته، پseudo-element CSS2 و CSS1 می‌توانند از نقطه یکتا استفاده کنند.

عنصر مخفی ::first-letter

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

در این مثال، فرمت اولین حرف همه عناصر <p> را تنظیم می‌کند:

مثال

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

آزمایش کنید

توجه داشته باشید:::first-letter عنصر مخفی فقط برای عناصر بلوک اعمال می‌شود.

ویژگی‌های زیرین برای عنصر مخفی ::first-letter کاربرد دارند:

  • ویژگی‌های فونت
  • ویژگی‌های رنگ
  • ویژگی‌های پس‌زمینه
  • ویژگی‌های حاشیه خارجی
  • ویژگی‌های حاشیه داخلی
  • ویژگی‌های لبه
  • text-decoration
  • vertical-align (فقط وقتی "float" به "none" باشد)
  • text-transform
  • line-height
  • float
  • clear

عناصر فرضی و CSS Classes

عناصر فرضی می‌توانند با CSS Classes ترکیب شوند:

مثال

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

آزمایش کنید

مثال بالا، حرف اول بخش‌های class="intro" را به رنگ قرمز و با اندازه فونت بزرگ‌تر نمایش می‌دهد.

عناصر فرضی چندگانه

همچنین می‌توان چندین عنصر فرضی را ترکیب کرد.

در این مثال، حرف اول بخش‌های متن قرمز و با اندازه فونت xx-large خواهد بود. بخش‌های باقی‌مانده از خط اول به رنگ آبی و با استفاده از حروف کوچک‌تر نمایش داده می‌شوند. بخش‌های باقی‌مانده از متن به اندازه فونت و رنگ پیش‌فرض نمایش داده می‌شوند:

مثال

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

آزمایش کنید

عنصر فرضی CSS - ::before

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

در این مثال، یک تصویر در پیش از محتوای هر عناصر <h1> قرار داده می‌شود:

مثال

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

آزمایش کنید

عنصر فرضی CSS - ::after

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

در این مثال، یک تصویر در پس از محتوای هر عناصر <h1> قرار داده می‌شود:

مثال

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

آزمایش کنید

عنصر فرضی CSS - ::selection

::selection عناصر فرضی با بخش‌های انتخاب شده کاربر مطابقت دارند.

این CSS Properties می‌توانند به عناصر فرضی اعمال شوند ::selection:

  • color
  • background
  • cursor
  • outline

در این مثال، متن انتخاب شده بر روی زمینه زرد به رنگ قرمز نمایش داده می‌شود:

مثال

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

آزمایش کنید

همه عناصر فرضی CSS

اختیارگر مثال شرح مثال
::after p::after محتوایی را بعد از هر عناصر <p> قرار دهید.
::before p::before محتوایی را قبل از هر عناصر <p> قرار دهید.
::first-letter p::first-letter انتخاب هر حرف اول عناصر <p>.
::first-line p::first-line انتخاب هر خط اول عناصر <p>.
::selection p::selection انتخاب بخش‌هایی از عناصر که کاربر انتخاب کرده است.

همه CSS pseudo-classes

اختیارگر مثال شرح مثال
:active a:active انتخاب لینک‌های فعال.
:checked input:checked انتخاب همه عناصر <input> که انتخاب شده‌اند.
:disabled input:disabled انتخاب همه عناصر <input> که غیرفعال هستند.
:empty p:empty انتخاب همه عناصر <p> که بدون فرزند هستند.
:enabled input:enabled انتخاب همه عناصر <input> که فعال هستند.
:first-child p:first-child انتخاب هر عناصر <p> که اولین فرزند پدر خود را انتخاب می‌کند.
:first-of-type p:first-of-type انتخاب هر عناصر <p> که اولین عناصر پدر خود را انتخاب می‌کند.
:focus input:focus انتخاب عناصر <input> که تمرکز دارند.
:hover a:hover انتخاب لینکی که ماوس روی آن قرار دارد.
:in-range input:in-range انتخاب همه عناصر <input> که در محدوده مقادیر مشخص شده قرار دارند.
:invalid input:invalid انتخاب همه عناصر <input> که ارزش‌های نامعتبر دارند.
:lang(language) p:lang(it) انتخاب همه عناصر <p> که ارزش attribute lang با "it" شروع می‌شود.
:last-child p:last-child انتخاب هر عناصر <p> که آخرین فرزند پدر خود را انتخاب می‌کند.
:last-of-type p:last-of-type انتخاب هر عناصر <p> که آخرین عناصر پدر خود را انتخاب می‌کند.
:link a:link انتخاب همه لینک‌هایی که بازنشانی نشده‌اند.
:not(selector) :not(p) انتخاب هر عناصر که غیر از <p> است.
:nth-child(n) p:nth-child(2) انتخاب هر عناصر <p> که دومین فرزند پدر خود را انتخاب می‌کند.
:nth-last-child(n) p:nth-last-child(2) انتخاب هر عناصر <p> که دومین فرزند پدر خود را انتخاب می‌کند، از آخرین فرزند شمارش می‌شود.
:nth-last-of-type(n) p:nth-last-of-type(2) هر <p> به عنوان دومین عنصر <p> والد خود را انتخاب کنید، از آخرین فرزند شروع کنید.
:nth-of-type(n) p:nth-of-type(2) هر <p> به عنوان دومین عنصر <p> والد خود را انتخاب کنید.
:only-of-type p:only-of-type هر <p> به عنوان تنها عنصر <p> والد خود را انتخاب کنید.
:only-child p:only-child عنصر <p> به عنوان تنها فرزند والد خود را انتخاب کنید.
:optional input:optional عناصر <input> بدون属性 "required" مشخص شده را انتخاب کنید.
:out-of-range input:out-of-range عناصر <input> با ارزش خارج از محدوده مشخص شده را انتخاب کنید.
:read-only input:read-only عناصر <input> با属性 "readonly" مشخص شده را انتخاب کنید.
:read-write input:read-write عناصر <input> بدون属性 "readonly" را انتخاب کنید.
:required input:required عناصر <input> با属性 "required" مشخص شده را انتخاب کنید.
:root root عنصر ریشه عنصر را انتخاب کنید.
:target #news:target عنصر #news فعلی را انتخاب کنید (URL شامل نام این اتصال کلیک شده باشد).
:valid input:valid تمام عناصر <input> با ارزش معتبر را انتخاب کنید.
:visited a:visited تمام لینک‌های بازدید شده را انتخاب کنید.