سی ایس ایس مائع علامت

پseudo-element چیست؟

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

مثلاً، می‌توان از آن استفاده کرد:

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

نحوه استفاده

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

selector::pseudo-element {
  پرپرتی: value;
}

::first-line پseudo-element

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

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

مثال

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

آزمایش کنید

توجه داشته باشید:::first-line پ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 از یک نقطه دوگانه استفاده می‌کنند.

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

::first-letter پseudo-element

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

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

مثال

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

آزمایش کنید

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

این پرپرتی برای ::first-letter پseudo-element کاربرد دارد:

  • پرپرتی فونت
  • پرپرتی رنگ
  • پرپرتی پس منظر
  • آؤتر پرپرتی
  • اینر پرپرتی
  • بوردر پرپرتی
  • text-decoration
  • vertical-align (تنها زمانی که "float" به "none" باشد)
  • text-transform
  • line-height
  • float
  • clear

عناصر تقلیدی و کلاس‌های CSS

عناصر تقلیدی می‌توانند با CSS کلاس‌ها ترکیب شوند:

مثال

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

آزمایش کنید

مثال بالا، اولین حرف پاراگراف با کلاس "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属性‌هایی که می‌توانند به ::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 پseudo-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> که به عنوان اولین علامت <p> والدین خود انتخاب شده است.
:focus input:focus انتخاب علامت <input> که تمرکز دارد.
:hover a:hover انتخاب لینکی که ماوس بر روی آن قرار دارد.
:in-range input:in-range انتخاب همه علامت‌های <input> که در محدوده مشخص شده قرار دارند.
:invalid input:invalid انتخاب همه علامت‌های <input> که ارزش‌های نامعتبر دارند.
:lang(language) p:lang(it) انتخاب همه علامت‌های <p> که ارزش 属性 lang با "it" آغاز می‌شود.
:last-child p:last-child انتخاب هر علامت <p> که به عنوان آخرین فرزند والدین خود انتخاب شده است.
:last-of-type p:last-of-type انتخاب هر علامت <p> که به عنوان آخرین علامت <p> والدین خود انتخاب شده است.
:link a:link انتخاب همه لینک‌هایی که دسترسی ندارند.
:not(selector) :not(p) انتخاب هر علامت که غیر از <p> است.
:فرزند دوم(n) p:فرزند دوم انتخاب هر علامت <p> که به عنوان دومین فرزند والدین خود انتخاب شده است.
:آخرین فرزند از نوع آخرین(n) p:آخرین فرزند از نوع آخرین انتخاب هر علامت <p> که به عنوان دومین فرزند والدین خود انتخاب شده است، از آخرین فرزند شمارش می‌شود.
:آخرین نوع از نوع آخرین(n) p:آخرین نوع از نوع آخرین هر عناصر <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 تمام لینک‌های بازدید شده را انتخاب کنید.