سبد خرید

آموزش شبه عناصر(Pseudo-Element) در CSS

 

شبه عناصر(Pseudo-Elements) چه هستند؟

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

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

شیوه ی نوشتاری یا سینتکس

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

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

بررسی شبه عنصر first-line:: در CSS

از شبه عنصر first-line:: برای اضافه کردن یک استایل خاص به اولین خط از یک متن استفاده می شود. مثال زیر، اولین خط از متن تمام عناصر <p> را فرمت دهی می کند:

مثال شماره 1

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
امتحان کنید

نکته: شبه عنصر first-line:: را تنها می توانیم به عناصر بلوکی(block) اعمال کنیم. در ویژگی های زیر می توانیم از شبه عنصر first-line:: استفاده کنیم:

  • ویژگی های font

  • ویژگی های color
  • ویژگی های background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

در این دستورات، به علامت دونقطه در  first-line:: و  first-line: توجه کنید.

در CSS3، برای شبه عناصر، به جای یک علامت دونقطه، از دو علامت دونقطه استفاده می شود. این اقدام از سوی W3C انجام شده است تا بین شبه کلاس ها و شبه عناصر تمایز قائل شویم.

در CSS1 و CSS2، از یک علامت دونقطه، هم برای شبه کلاس ها و هم برای شبه عناصر استفاده می شد. برای سازگاری عقب رو، می توانیم از یک علامت دونقطه، برای شبه عناصر در CSS1 و CSS2 استفاده کنیم.

بررسی شبه عنصر first-letter:: در CSS

از شبه عنصر first-letter:: برای اضافه کردن یک استایل خاص به اولین حرف از یک متن استفاده می شود. در مثال زیر، اولین حرف از متن درون تمام عناصر <p> فرمت دهی شده است:

مثال شماره 2

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
امتحان کنید

نکته: از شبه عنصر first-letter:: تنها می توانیم در عناصر بلوکی(block) استفاده کنیم. برای ویژگی های زیر، می توانیم از شبه عنصر first-letter:: استفاده کنیم:

  • ویژگی های font
  • ویژگی های color
  • ویژگی های background
  • ویژگی های margin
  • ویژگی های padding
  • ویژگی های border
  • text-decoration
  • vertical-align (تنها اگر float برابر با none باشد)
  • text-transform
  • line-height
  • float
  • clear

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

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

مثال شماره 3

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}
امتحان کنید

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

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

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

مثال شماره 4

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

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
امتحان کنید

بررسی شبه عنصر before:: در CSS

با استفاده از شبه عنصر before:: می توانیم مقداری محتوا را قبل از محتوای یک عنصر درج کنیم. در مثال زیر، یک تصویر را قبل از محتوای هر عنصر <h1> درج می کنیم:

مثال شماره 5

h1::before {
  content: url(other/smiley.gif);
}
امتحان کنید

بررسی شبه عنصر after:: در CSS

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

مثال شماره 6

h1::after {
  content: url(smiley.gif);
}
امتحان کنید

بررسی شبه عنصر marker:: در CSS

شبه عنصر marker:: علامت های آیتم های لیست را انتخاب می کند. در مثال زیر، به علامت های آیتم های یک لیست استایل دهی می کنیم:

مثال شماره 7

::marker {
  color: red;
  font-size: 23px;
}
امتحان کنید

بررسی شبه عنصر  selection:: در CSS

شبه عنصر selection:: بخشی از یک عنصر که توسط یک کاربر انتخاب می شود را مورد تطابق قرار می دهد. از ویژگی های زیر، می توانیم در دستور selection:: استفاده کنیم:

  • color
  • background
  • cursor
  • outline

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

مثال شماره 8

::selection {
  color: red;
  background: yellow;
}
امتحان کنید

لیست تمام شبه کلاس های CSS

سلکتور مثال توضیح مثال
:active a:active

لینک را وقتی که دکمه ماوس روی آن فشار داده می شود، انتخاب می کند.
:checked input:checked

هر عنصر <input> که چک خورده است را انتخاب می کند.
:disabled input:disabled

هر عنصر <input> که غیرفعال(disabled) شده است را انتخاب می کند.
: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> که یک مقدار نامعتبر(invalid) دارند را انتخاب می کند.
: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> نیست را انتخاب می کند.
: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

عنصر ریشه ی(root) سند را انتخاب می کند.
:target news:target#

عنصر فعلی فعال news# را انتخاب می کند.
:valid input:valid

تمام عناصر <input> که یک مقدار معتبر(valid) دارند را انتخاب می کند.
:visited a:visited

تمام لینک های ویزیت شده را انتخاب می کند.

 

لیست تمام شبه عناصر CSS

سلکتور مثال توضیح مثال
::after p::after

 اضافه کردن محتوا، پس از هر عنصر <p>
::before p::before

اضافه کردن محتوا قبل از هر عنصر <p>
::first-letter p::first-letter

انتخاب حرف اول از هر عنصر <p>
::first-line p::first-line

انتخاب اولین خط از هر عنصر <p>
::marker ::marker

علامت های آیتم های لیست را انتخاب می کند.
::selection p::selection

بخشی از یک عنص که توسط یک کاربر انتخاب شده است را انتخاب می کند.

 

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال