آموزش سلکتور selection:: در css

در زبان طراحی css سلکتور ها انواع و حالات مختلف دارند که یک css کار ماهر باید به اکثر آنها اشراف داشته باشد . اگر هنوز درمورد سلکتور در css اطلاعی ندارید باید گفت css امکان انتخاب کردن عناصر داخل صفحه که توسط html کدنویسی شده است را به شما خواهد داد . برای مثال انتخاب کردن یک عکس داخل کدها و کار کردن روی ظاهر آن ! برخی از این سلکتورها یا همان انتخاب کننده‌ها ، به شکل کلاس و آیدی هستند ، یعنی شما باید حتما یک کلاس یا یک آیدی به تگ مدنظر خودتان در html تنظیم کرده و سپس به کمک همان شناسه ، داخل css برای آن المان استایل نویسی کنید . نمونه‌ استفاده از کلاس و آیدی برای المان های html به شکل زیر است :

<p class="Header__P">P tag<p>
<div id="Main__Wrapper">Div tag<p>

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

::placeholder{}
::selection{}
::after{}
::before{}

در این سلکتورها یا همان انتخاب کننده ها ، در ابتدا یک علامت :: وجود دارد که این سلکتورها را از سایر انتخاب کننده‌ها متمایز نموده است . محتوای آموزشی این مقاله در مورد بخش selection است . اما بخش selection چیست و در طراحی شما چه جایگاهی دارد که باید برای آن استایل نویسی کنیم ؟

بخش selection در Css برای چیست ؟

اول از هرچیزی باید بدانیم که اصلا بخش selection برای چه مواردی کاربرد دارد و نقش آن در پروژه طراحی سایت شما دقیقا چیست ؟ برای اینکه این موضوع را بفهمید همین الان در قسمتی از متن داخل همین صفحه به کمک کلیک چپ موس خودتان بخشی از متن را به وسیله Drag انتخاب کنید گویا که قصد دارید این قسمت از متن را کپی کنید .

اکنون دقت کنید !!! زمانی که متن انتخاب می‌شود ، یک رنگ آبی پشت متن شما قرار گرفته و مشخص می‌کند که این قسمت از متن شما انتخاب شده است که نهایتا می‌توانید توسط راست کلیک و با اعمالی مثل copy و … روی آن کار کنید و این متن را مثلا داخل برنامه Word کپی و پیست کنید .

بخش selection دقیقا همینجا وارد عمل می‌شود . همچین رنگ آبی که پشت متن شما قرار گرفته است توسط ویژگی selection در زبان سی اس اس کنترل می‌شود و می‌توان آن را تغییر داد .

شاید تا امروز اصلا به این قسمت توجه نکرده بودید و حتی به فکرشما هم نرسیده بود که می‌توان این رنگ آبی پیشفرض پس‌زمینه را تغییر داد . اما اکنون توسط خاصیت selection که یک سلکتور جالب در زبان سی اس اس است می‌توان این بخش را نیز کنترل کرد .

بخش selection در مرورگر Chrome از نسخه 4.0 ، در مرورگر Edge از نسخه 9.0 ، در مرورگر Firefox از نسخه 62.0 ، در مرورگر Safari از نسخه 3.1  ، و در مروگر Opera از نسخه 10.1 به بعد پشتیبانی می‌شود که با این اوصاف و با توجه به نسخه های فعلی مروگرها می‌توان اینگونه گفت که تمامی مرورگرهای فعلی این ویژگی را پشتیبانی می‌کنند و شما درصورت استفاده از این کد ، نگران اجرا نشدن آن داخل پروژه‌های طراحی سایت نخواهید بود .

چگونه از این ویژگی استفاده کنیم ؟

برای اینکه بخش selection را داخل سایت خودتان کنترل نموده و رنگ پس زمینه بخش‌های انتخاب متن را از حالت پیشفرض آبی تغییر دهید کافیست تا 2 خط کد را به داخل فایل style.css خودتان اضافه کنید . نمونه کد این بخش به شکل زیر است :

::selection {
  color: #faf4f4;
  background: #414141;
}

در این کد شما می‌توانید یک رنگ پس زمینه یا به عبارتی Background-color به همراه بخش color که مربوط به رنگ خود متن است را تنظیم کنید که تنظیم تم رنگ این بخش‌ها نیز باتوجه به سلیقه خود شما انجام خواهد شد .  ویژگی هایی که می‌توان توسط این انتخاب‌گر تغییر داد شامل ویژگی های زیر است :

color
background-color
text-decoration
text-shadow

به عبارت ساده ، تنها میتوان رنگ پس‌زمینه ، رنگ متن ، خط زیرین متن و سایه متن را در این انتخاب کننده برای متون سایت تغییر داد و استفاد از ویژگی های دیگری همچون font-size و … امکان پذیر نیست . دقت کنید که با این کار و قرار دادن کد به این شکل ، رنگ تمامی بخش های انتخاب متن در سایت شما تغییر خواهد کرد ، اگر قصد دارید تا صرفا بروی یک بخش خاص این ویژگی اعمال شود باید توسط کلاس یا آیدی و هر حالتی که مدنظر دارید کد را تغییر دهید .  مثلا ما قصد داریم تنها برای تگ های p داخل سایت این وضعیت تغییر کند پس می‌توان کد را به شکل زیر تتغییر داد :

p::selection {
  color: #faf4f4;
  background: #212121;
}

یا برای هرقسمتی از سایت خودتان که قصد داشتید تا داخل آن قسمت رنگ بخش انتخاب متن تغییر کند ، می‌توانید از همین بخش برای قسمت مدنظرتان استفاده کنید . پس با قسمت selection و نحوه کار آن در طراحی سایت آشنا شدید که بسیار ساده بوده و در تمامی پروژه ها نیز قابل اجرا است . شاید در پروژه های خاصی به کار شما آمد !

اگر علاقمند به آشنایی با چنین سلکتورهایی در زبان طراحی css هستید حتما سایر مقالات سئو نود را در بخش ” مقالات طراحی سایت ” مطالعه کنید . این دسته از سلکتورهای css به اندازه سایر سلکتورها شاخته شده نیستند درنتیجه آشنایی با نحوه کار این انتخاب‌گر و امثال آنها می‌توانند وجه تمایزی بین شما و سایر مشتاقان یادگیری سی اس اس باشد . موفق باشید .