استایل دادن در هنگام انتخاب متون با selection در CSS

Loadingافزودن به علاقه مندی ها

این جمله را با موس خود انتخاب کنید! توجه کنید که چگونه هنگام انتخاب متن، رنگ متن و پس زمینه آن متفاوت است. شما می‌توانید رنگ پس‌زمینه و رنگ متن انتخاب شده را با ::selection تغییر دهید. selection در CSS یک شبه المان است که با آن می‌توان روی رنگ متن و پس زمینه آن تغییر ایجاد کرد.

استایل دادن در هنگام انتخاب متون با selection در CSS

تغییر رنگ و پس زمینه انتخاب متون با selection در CSS

به مثال زیر توجه کنید:

p::selection {
  background: #fff;
  color: #ff0000;
}

توجه داشته باشید که دو عدد colon یا دونقطه بعد از انتخابگر المان، در سینتکس برای این شبه المان ضروری است، با وجود اینکه سایر شبه عناصر مانند hover دونقطه منفرد را می‌پذیرند.

همانطور که در بالا مشاهده شد، می‌توانید selection را روی عناصر جداگانه استایل دهید. همچنین می‌توانید کل صفحه را با گذاشتن شبه عنصر خالی در استایل‌شیت خود استایل دهید:

::selection { background: yellow; }

فقط سه ویژگی وجود دارد که selection با آنها کار می‌کند

  • رنگ (color)
  • پس‌زمینه (به‌ویژه ویژگی‌های رنگ پس‌زمینه (background-color) ، تصویر پس‌زمینه (background-image)
  • سایه متن (text-shadow)

See the Pen
css ::selection examples
by Persiacoders (@persiacoders)
on CodePen.

اگر سعی کنید selection را با ویژگی‌هایی که در بالا نیست استایل کنید، آن ویژگی نادیده گرفته می‌شود. روی استایل دهی خود در حالت انتخاب متن دقت کنید چرا که ممکن است خوانایی متون برای بیننده سخت یا آزاردهنده شود. ضمن اینکه شما فقط می‌توانید تنها از یک رنگ استفاده کنید و خبری از gradient نیست!

این کار را هم نکنید! :

p::-moz-selection, p::selection { color: red; };

بهتر است برای اجرای کامل این استایل دهی در دو مرورگر کروم و فایرفاکس، کد مرورگر ها را جدا جدا وارد کنید:

p::-moz-selection { color: red; }
p::selection { color: red; }

یکی از مفیدترین کاربردهای selection خاموش کردن سایه متن در حین selection است. سایه متن می‌تواند با رنگ پس‌زمینه selection تضاد داشته باشد و خواندن متن را دشوار کند. کد text-shadow: none می‌تواند مناسب باشد تا متن در هنگام انتخاب واضح و قابل خواندن باشد.

See the Pen
css::selection 2
by Persiacoders (@persiacoders)
on CodePen.

selection فانتزی

جفت شدن با Sass یا هر پیش پردازنده دیگری، می‌تواند جلوه‌های بسیار جالبی را به همراه selection ایجاد کند. متن را در دمو زیر انتخاب کنید:

See the Pen
scss::selection example
by Persiacoders (@persiacoders)
on CodePen.

ممکن است این کار در برخی از مرورگرها چندان مناسب نباشد.

مطلب چه موقع از عنصر Button استفاده کنیم را از دست ندهید!

این مطلب مفید بود؟

روی یک ستاره کلیک کنید تا رای ثبت شود!

میانگین آرا 0 / 5. تعداد آرا: 0

این پست ستاره‌ای ندارد! به آن ستاره دهید!

دیدگاه ها

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

مطالب مشابه

چه موقع از عنصر Button استفاده کنیم؟

چه موقع از عنصر Button استفاده کنیم؟

چه موقع از المان Button استفاده کنیم؟ مثال اولیه استفاده از المان button رایج ترین نتیجه کلیک کردن بر روی المان‌های یک وب سایت چیست؟ رفتن به یک URL جدید، […]