عناصر شبه CSS

عناصر شبه CSS (CSS Pseudo-elements) ابزاری قدرتمند در زبان CSS هستند که به شما امکان می‌دهند محتوای اضافی به عناصر موجود در HTML اضافه کنید و ظاهر و رفتار آنها را به طور ظریف تنظیم کنید. این عناصر در واقع وجود فیزیکی در صفحه HTML ندارند، اما می‌توانند به عنوان بخشی از یک عنصر موجود، محتوای بصری، نشانگرها و افکت‌های مختلف را به آن اضافه کنند. عناصر pseudo CSS بخش خاصی از عناصر HTML مانند حروف اول یا خط پاراگراف ها را سبک می کنند.

شبه عناصر CSS

عناصر شبه CSS (شبه کلاس ها) نوع خاصی از انتخابگرها در CSS هستند که به شما امکان می دهند محتوای اضافی را به عناصر موجود در HTML اضافه کنید و یا ظاهر آنها را به شیوه های خاص، بدون نیاز به تغییر در ساختار HTML، تغییر دهید. در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید. دو عنصر شبه رایج CSS عبارتند از:

• ::before: این شبه عنصر قبل از محتوای عنصر اصلی قرار می‌گیرد.
• ::after: این شبه عنصر بعد از محتوای عنصر اصلی قرار می‌گیرد.

برخی از کاربردهای رایج عناصر شبه CSS عبارتند از:

• اضافه کردن نشانگرها به پیوندها: می توانید از شبه عنصر ::after برای اضافه کردن نشانگرهای مثلثی یا خطوط به انتهای پیوندها استفاده کنید.
• ایجاد حاشیه های کاذب: می توانید از شبه عناصر ::before و ::after برای ایجاد حاشیه های کاذب در اطراف عناصر استفاده کنید. این کار می تواند برای ایجاد افکت هایی مانند سایه ها، جعبه های داخلی و جداکننده ها استفاده شود.
• موقعیت دهی محتوا: می توانید از شبه عناصر ::before و ::after برای موقعیت دهی محتوای اضافی در داخل یا خارج از یک عنصر استفاده کنید. این کار می تواند برای ایجاد افکت هایی مانند شماره گذاری سطرها یا افزودن آیکون ها به دکمه ها استفاده شود.
• ایجاد انیمیشن ها: می توانید از شبه عناصر ::before و ::after برای ایجاد انیمیشن های ساده CSS استفاده کنید.

برای استفاده از عناصر شبه CSS، باید از دو علامت دونقطه (::) به دنبال نام شبه عنصر استفاده کنید. به عنوان مثال، برای هدف قرار دادن شبه عنصر ::after یک عنصر با شناسه button، از کد زیر استفاده می کنید:

#button::after {
content: "فلش";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}

در این مثال، کد زیر محتوای “فلش” را به شبه عنصر ::after عنصر با شناسه button اضافه می کند، آن را به صورت مطلق موقعیت دهی می‌کند، و آن را در وسط لبه سمت راست عنصر قرار می‌دهد.

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

تعریف عناصر pseudo

• با افزودن یک کلمه کلیدی به انتخاب کنندگان عادی می توانید عناصر شبه CSS ایجاد کنید.
• عناصر شبه با کلاس های شبه تفاوت دارند زیرا آنها از دو نقطه (: 🙂 قبل از کلمه کلیدی استفاده می کنند.
• تفاوت دیگر این است که عناصر شبه قطعات خاصی از عناصر HTML را سبک می کنند ، نه حالات آن ها.

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

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

کاربردهای رایج عناصر شبه:

• استایل دهی به اولین حرف: ::first-letter
• استایل دهی به خط اول: ::first-line
• اضافه کردن محتوا قبل یا بعد از یک عنصر: ::before و ::after
• ایجاد نشانگرهای حاشیه ای: ::selection
• ایجاد افکت های تعاملی: :hover

p::first-letter {
color: red;
font-size: 2em;
}

اضافه کردن یک خط آبی قبل از هر عنوان h2:

h2::before {
content: "—";
color: blue;
margin-right: 10px;
}

ایجاد افکت “hover” برای دکمه ها با تغییر رنگ پس زمینه:

button:hover {
background-color: #007bff;
}

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

• افزایش انعطاف پذیری در طراحی: بدون نیاز به HTML اضافی، می توانید به قسمت های مختلف یک عنصر استایل دهید.
• کاهش حجم کد CSS: با استفاده از عناصر شبه، می توانید کد CSS خود را کوتاه تر و خواناتر کنید.
• ایجاد افکت های بصری جذاب: عناصر شبه برای ایجاد افکت های بصری خلاقانه و چشم نواز ایده آل هستند.

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

عناصر شبه (Pseudo-elements) در CSS ابزاری قدرتمند برای استایل دهی به بخش های خاصی از یک عنصر HTML هستند. این عناصر که با دو علامت دونقطه (::) مشخص می شوند، به شما امکان می دهند بدون نیاز به ایجاد عناصر HTML جدید، به قسمت هایی از یک عنصر مانند اولین حرف، خط اول، قبل یا بعد از محتوا استایل دهید.

نکات کلیدی:

• علامت دو نقطه (::): این علامت نشان می دهد که با یک عنصر شبه سروکار دارید.
• انتخابگر: قبل از علامت های دو نقطه، انتخابگری قرار می گیرد که عنصر مورد نظر را مشخص می کند.
• عنصر شبه: بعد از علامت های دو نقطه، نام عنصر شبه که می خواهید استایل دهید، قرار می گیرد.
• قوانین CSS: داخل آکولادها، قوانین CSS معمولی برای استایل دهی به عنصر شبه نوشته می شوند.

p::first-letter {
color: red;
font-size: 2em;
}

در این مثال، p::first-letter به اولین حرف هر پاراگراف با رنگ قرمز و اندازه دو برابر استایل می دهد.

عناصر pseudo مشترک

before::

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

کاربردهای عنصر شبه ::before:

• اضافه کردن آیکون ها: می توانید از آیکون های Font Awesome یا تصاویر SVG برای نمایش آیکون های مرتبط با محتوای عنصر قبل از آن استفاده کنید.
• ایجاد خطوط جداکننده: می توانید با استفاده از خطوط افقی یا عمودی قبل از عناوین یا بخش های مختلف، خوانایی صفحه را افزایش دهید.
• شماره گذاری لیست ها: می توانید با استفاده از ::before به جای شماره گذاری پیش فرض HTML، شماره گذاری سفارشی برای لیست های خود ایجاد کنید.
• ایجاد افکت های بصری: می توانید با استفاده از ::before برای ایجاد افکت های بصری خلاقانه مانند نشانگرهای حاشیه، سایه ها و فلش ها، طراحی خود را جذاب تر کنید.

نحوه استفاده از عنصر شبه ::before:

selector::before {
  content: "محتوای مورد نظر"; /* محتوای متنی یا تصویری */
  /* سایر خواص CSS برای استایل دهی به ::before */
}

در این مثال، یک خط تیره خاکستری با فاصله 10 پیکسل قبل از هر عنوان h2 اضافه می شود.

h2::before {
  content: "— "; /* اضافه کردن خط تیره قبل از هر عنوان h2 */
  color: #ccc; /* تنظیم رنگ خط تیره */
  margin-right: 10px; /* فاصله بین خط تیره و عنوان */
}

نکات مهم:

• محتوا: می‌توانید از متن، تصاویر یا هر نوع محتوای دیگری برای content استفاده کنید.
• موقعیت: عنصر ::before به طور پیش فرض در بالای عنصر اصلی قرار می‌گیرد. می‌توانید با استفاده از خواص CSS مانند top و left موقعیت آن را تغییر دهید.
• ظاهر: می‌توانید از تمام خواص CSS برای استایل دهی به ::before مانند رنگ، اندازه، فونت و غیره استفاده کنید.

after::

عنصر شبه ::after یکی از قدرتمندترین ابزارهای موجود در CSS است که به شما امکان می‌دهد محتوای تزئینی یا کاربردی را به بعد از هر عنصر HTML اضافه کنید. این کار بدون نیاز به افزودن عناصر اضافی به کد HTML شما انجام می‌شود، که می‌تواند ساختار کد را تمیزتر و خواناتر نگه دارد.

برای استفاده از ::after، از سینتکس زیر استفاده کنید:

selector::after {
  content: "[محتوای مورد نظر]";
  /* سایر خواص CSS */
}

در این سینتکس:

• selector عنصری را که می‌خواهید ::after به آن اعمال شود، انتخاب می‌کند.
• content محتوایی را که می‌خواهید بعد از عنصر اضافه شود، مشخص می‌کند. این محتوا می‌تواند متن، تصاویر یا حتی کد HTML باشد.
• properties سایر خواص CSS را که می‌خواهید به ::after اعمال کنید، تعریف می‌کند. این خواص می‌توانند شامل مواردی مانند رنگ، موقعیت، اندازه و غیره باشند.

نکاتی برای استفاده از ::after:

• از ::after برای اضافه کردن محتوای معنی‌دار به وب‌سایت خود استفاده کنید. از استفاده از آن فقط برای اهداف تزئینی که می‌تواند برای کاربران ناخوانا باشد، خودداری کنید.
• مراقب باشید که از ::after بیش از حد استفاده نکنید. استفاده بیش از حد از آن می‌تواند وب‌سایت شما را شلوغ و آشفته کند.
• از خواص CSS مانند z-index برای اطمینان از اینکه محتوای ::after به درستی روی سایر عناصر قرار می‌گیرد، استفاده کنید

selection::

selection:: یک شبه عنصر در CSS است که برای استایل دهی به متنی که توسط کاربر انتخاب شده است استفاده می شود. این شبه عنصر به شما امکان می دهد رنگ، پس زمینه، نشانگر ماوس و حاشیه متن انتخاب شده را تغییر دهید. selection:: توسط تمام مرورگرهای مدرن پشتیبانی می شود.

برخی از کاربردهای رایج selection:: عبارتند از:

• برجسته کردن متن انتخاب شده: می توانید از رنگ متضاد برای متن انتخاب شده استفاده کنید تا به وضوح قابل مشاهده باشد.
• ایجاد خوانایی بهتر: می توانید از پس زمینه روشن تر برای متن انتخاب شده استفاده کنید تا خواندن آن آسان تر شود.
• نمایش اطلاعات اضافی: می توانید از حاشیه یا نشانگر ماوس سفارشی برای نمایش اطلاعات اضافی در مورد متن انتخاب شده استفاده کنید.

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

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

می توانید از بسیاری از خواص CSS برای استایل دهی به selection:: استفاده کنید، از جمله:

• color: رنگ متن انتخاب شده
• background: رنگ پس زمینه متن انتخاب شده
• cursor: نشانگر ماوس برای متن انتخاب شده
• outline: حاشیه برای متن انتخاب شده
• selection:: فقط برای متن قابل استفاده است.
• نمی توانید از selection:: برای استایل دهی به عناصر دیگر در صفحه استفاده کنید.
• برخی از مرورگرها ممکن است از برخی از خواص selection:: پشتیبانی نکنند.

افزودن چندین عنصر pseudo

می توانید چندین عنصر pseudo را برای یک عنصر در CSS ترکیب کنید. با این حال، محدودیت هایی وجود دارد که باید به آنها توجه داشته باشید:

• استفاده از :: دو بار مجاز نیست: نمی توانید از CSS:: بعد از دو بار یا :: قبل از دو بار استفاده کنید.
• هر عنصر pseudo باید در خط جداگانه باشد: برای استفاده از چندین عنصر pseudo در یک انتخاب کننده، باید آنها را در خطوط مختلف روی آن انتخاب کننده تعریف کنید.

div::first-letter {
color: green;
font-size: x-large;
}

div::first-line {
color: red;
text-transform: uppercase;
}

• ::first-letter: این عنصر pseudo اولین حرف هر بلاک را هدف قرار می دهد.
• ::first-line: این عنصر pseudo اولین خط هر بلاک را هدف قرار می دهد.

ما هر عنصر pseudo را در خط جداگانه تعریف می کنیم و از :: فقط یک بار برای هر عنصر استفاده می کنیم.

Description	Selector
بعد از محتوای هر یک از عناصر مشخص شده ، محتوا را وارد کنید	after::
قبل از محتوای هر یک از عناصر مشخص شده ، محتوا را وارد کنید	before::
حرف اول هر یک از عناصر مشخص را انتخاب می کند	first-letter::
اولین خط از هر یک از عناصر مشخص شده را انتخاب می کند	first-line::
بخشی از عنصر را که توسط کاربر انتخاب شده است انتخاب می کند	selection::
هر عنصری را در شکاف یک الگوی HTML انتخاب می کند	()slotted::
نشانه های WebVTT را در یک عنصر انتخاب شده انتخاب می کند	cue::
تجربی کادری را که پس از ورود عناصر به حالت تمام صفحه ظاهر می شود ، انتخاب می کند	backdrop::
تجربی بخشی از متن را که عامل کاربر به عنوان دستوری نادرست علامت گذاری می کند ، انتخاب می کند	grammar-error::
تجربی جعبه نشانگر مورد لیست را انتخاب می کند ، معمولاً با یک گلوله یا یک عدد	marker::
تجربی عناصر دارای ویژگی قسمت را از درخت سایه انتخاب می کند	()part::
تجربی متن محل نگهدارنده یا را انتخاب می کند</p>	placeholder::
تجربی بخشی از متن را انتخاب می کند که عامل کاربر به عنوان املای اشتباه علامت گذاری می کند	pelling-error::