شبه عنصر ها در CSS

از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود. در این فصل با انواع شبه عنصر آشنا خواهیم شد.


 از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود.

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

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

سینتکس(نحو)

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

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

به جفت دو نقطه در سینتکس شبه عناصر دقت کنید برای مثال first-line:: در مقابل first-line:
در CSS3 جفت دو نقطه برای شبه عنصرها جایگزین دو نقطه تکی شده است. به این طریق میتوان شبه عنصر ها را از شبه کلاس ها تشخیص داد.
در گذشته در CSS1 و CSS2 از دو نقطه ی تکی برای هر دوی شبه عناصر و شبه کلاس ها استفاده میشد.


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

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

نمونه مثال زیر اولین خط از یک متن در یک عنصر <p> را فرمت بندی میکند:

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-letter::

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

نمونه مثال زیر اولین حرف از متون داخل عناصر <p> را فرمت بندی میکند :

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

شبه عنصر ها و کلاس ها در CSS 

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

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

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


ترکیب چندین شبه عنصر

چندین شبه عنصر میتوانند با هم ترکیب شوند.

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

باقی مانده ی خط اول به رنگ آبی و به شکل small-caps در خواهد آمد. باقی مانده ی پاراگراف نیز دارای رنگ و اندازه ی فونت پیشفرض است :

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

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

شبه عنصر before::

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

نمونه مثال زیر یک تصویر را به قبل از محتوای هر عنصر <h1> اضافه میکند :

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

شبه عنصر after::

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

نمونه مثال زیر یک تصویر را به بعد از محتوای هر عنصر <h1> اضافه میکند :

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

شبه عنصر selection::

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

صفات ذکر شده در پایین را میتوان به شبه عنصر ::selection اعمال کرد:

  • color 
  • background
  • cursor
  • outline

در نمونه مثال زیر وقتی کاربر متن را انتخاب میکند رنگ متن به رنگ قرمز و رنگ پس زمینه ی آن به رنگ زرد در خواهد آمد :

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

 

دیدگاه ها

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید

دیدگاه های ارزشمند شما

elahe lotfi - ۳ سال قبل
cursor: all-scroll; من این رو به مثال اخر این بخش اضافه کردم اما تغییری در شکل نمایش نشون نداد
کاربر مهمان - ۴ سال قبل
با درود به استاد این قسمت خیلی جذاب بود ممنون از زحماتتون یه سوال:وقتی در کروم ،اینسپکت را میزنیم یه سری از عناصر را نمیشه تشخیص داد جز چه کلاس یا آی دی هستند .چطوری میشه اینا را تشخیص داد؟
حمید رضا ملکی - ۴ سال قبل

سلام. معمولا همه عناصر تشخیص داده میشوند. منظور شما دقیقا چه عناصری است؟

هدف لرن سورس

لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.

ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.

بخش های اصلی

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

راه های ارتباطی

شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید:

کلیه حقوق مادی و معنوی وبسایت متعلق به لرن سورس می باشد.