معرفی سلکتور های css
همان طور که می دانید Css یکی از تکنولوژی های مرتبط با حوزه برنامه نویسی است که در زمینه توسعه فرانت اند وب مورد استفاده قرار می گیرد؛ در Css انتخابگر های مختلفی وجود دارد که ساده ترین آن ها class و id هستند و همه شما عزیزان با آن ها آشنا هستید. اما سلکتور های Css به همین دو مورد محدود نمی شوند، بلکه سلکتور های بسیار زیاد دیگه ای نیز در Css وجود دارند که به عنوان برنامه نویس فرانت اند باید به اندازه کافی با آن ها کار کرده و تسلط کافی را داشته باشید.
یادگیری بیشتر سلکتور های Css به شما کمک می کنند با آمادگی بیشتر طراحی یک وب سایت را شروع کنید و موقع توسعه فرانت اند اذیت نشوید.
در این مقاله به معرفی سلکتور های Css می پردازیم. اما اگر قصد دارید به طور کامل با تمامی موارد css آشنا شوید می توانید از دوره آموزش css سبزلرن استفاده کنید و تخصص خود را افزایش دهید.
دسته بندی سلکتور های Css
همان طور که می دانید Css سلکتور های زیادی دارید. از این رو برای شناختن آسان تر، آن ها را دسته بندی می کنیم. سلکتور های Css به طور کلی به دسته های زیر تقسیم می شوند:
- سلکتور های اولیه
- سلکتور گروه بندی
- سلکتور های ترکیبی
- سلکتور بر اساس صفت (Attribute)
- شبه کلاس ها
- المنت های مجازی
در ادامه مقاله هر کدام از سلکتور ها را به طور مفصل مورد بررسی قرار می دهیم.
سلکتور های اولیه در Css
توسط این دسته از سلکتور های Css که احتمالا همه شما با آن ها آشنا هستید، می توانیم المنت یا المنت هایی را به کمک اسم Tag، اسم Class و یا اسم ID انتخاب بکنیم.
اولین سلکتوری که می خواهیم از این دسته یاد بگیریم، سلکتور سراسری یا همان Universal نام دارد که تمام المنت های Html را انتخاب می کنید.
به تکه کد زیر توجه کنید:
* { color: red; }
همان طور که مشاهده می کنید، از سلکتور * استفاده کرده ایم. این سلکتور تمامی المنت های موجود در صفحه Html را انتخاب کرده و استایل هایی که داخل { } نوشته شدند را برای آن ها اعمال می کنید.
سلکتور بعدی حالتی است که قصد داشته باشید المنت هایی که اسم مشخصی دارند را انتخاب کنیم. به عنوان مثال فرض کنید در یک صفحه Html یک تگ ul داریم که داخل آن 5 تگ li موجود هست.
برای انتخاب تمام تگ ها li، از خود اسم تگ استفاده می کنیم که به همچین سلکتوری سلکتور Type گفته می شود.
مثل تکه کد زیر:
li { /* استایل های مورد نظر شما */ }
حال اگر بخواهید در کنار li المنت های دیگری را نیز انتخاب کنید، باید به شکل زیر عمل بکنید:
a { /* استایل های مورد نظر شما برای لینک ها */ } p { /* استایل های مورد نظر شما برای پاراگراف ها */ } ul { /* استایل های مورد نظر شما برای لیست های غیر ترتیبی */ } li { /* استایل های مورد نظر شما برای آیتم های لیست ها */ }
به همین راحتی 🙂
حال اگر بخواهید المنتی را توسط اسم کلاسی که دارد انتخاب کنید، باید از سلکتوری که اصطلاحا Class Selector نام دارد استفاده کنید.
فرض کنید در صفحه Html یک تگ div با کلاسی به اسم box داریم. برای انتخاب این المنت به کمک Class Selector به روش زیر عمل می کنیم:
.box { width: 20em; }
همان طور که مشاهده می کنید، برای انتخاب با اسم کلاس باید قبل از نوشتن آن یک کاراکتر (.) قرار می دهیم. حال فرض کنید چندین المنت با کلاس box داریم. در این صورت با نوشتن تکه کد بالایی تمامی المنت هایی که کلاس box دارند انتخاب می شوند و هر استایلی که در Css برای آن ها در نظر بگیرید، برای تمامی المنت ها اعمال می شود.
سلکتور بعدی ID Selector نام دارد و همان طور که از اسم آن مشخص است زمانی استفاده می شود که قصد داشته باشید المنتی را به کمک اسم آیدی که دارد انتخاب کنیم.
به عنوان مثال فرض کنید در صفحه Html المنتی با آیدی header داریم که می خواهیم به کمک Css استایل هایی را برای آن در نظر بگیریم. در همچین حالتی به شکل زیر عمل می کنیم:
#header { background-color: green; }
همان طور که مشخص است دقیقا مثل Class Selector عمل می کنیم. با این تفاوت که برای انتخاب با آیدی، قبل از اسم آیدی به جای . از هشتگ (#) استفاده می کنیم.
سلکتور گروه بندی در Css
طبق سلکتور هایی که در قسمت قبل یاد گرفتید، فرض کنید تکه کد زیر را در Css پیاده سازی کرده ایم:
.info { margin: 41px 22px 12px 20px; padding: 29px; color: red; background-color: green; display: flex; } .success { margin: 41px 22px 12px 20px; padding: 29px; color: blue; background-color: green; display: flex; } .error { margin: 41px 22px 12px 20px; padding: 29px; color: green; background-color: green; display: flex; }
همان طور که مشاهده می کنید سه دسته از المنت ها را با کلاس info, success و error انتخاب کردیم و تقریبا استایل های یکسانی به همه آن ها اعمال کردیم و تنها تفاوتی که دارند پروپرتی color است.
برنامه نویس ها سعی می کنند همیشه بهترین و سریع ترین راه را انتخاب کنند تا از تکرار بپرهیزند. اما در تکه کد بالا 4 خط کد را 3 بار عینا تکرار کردیم!
برای سرعت توسعه بیشتر و انتخاب راحت تر، می توانیم سلکتور ها را در کنار هم دسته بندی کرده و استایل هایی از المنت ها که یکسان هستند را فقط یک بار بنویسیم و برای همه آن ها اعمال شود.
برای دسته بندی سلکتور های Css به روش زیر عمل می کنیم:
.error, .info, .success { margin: 41px 22px 12px 20px; padding: 29px; color: green; background-color: green; display: flex; }
به همین راحتی و خوشمزگی. همان طور که متوجه شدید برای جدا کردن سلکتور های مختلف از کاراکتر کاما (,) استفاده می کنیم. اما اگر به کد قبلی نگاهی بیندازید، مشاهده خواهید کرد که پروپرتی color برای هر کدام از سلکتور ها متفاوت بود! برای color باید چطور عمل کنیم؟! خیلی راحت. مثل کد زیر:
.error, .info, .success { margin: 41px 22px 12px 20px; padding: 29px; color: green; background-color: green; display: flex; } .info { color: red; } .success { color: blue; } .error { color: green; }
به همین راحتی می توانیم استایل های یکسان را در یک دسته قرار داده و برای استایل هایی که متفاوت هستند را به طور جداگانه اعمال می کنیم.
در تکه کد های بالا همه سلکتور هایی که دسته بندی کرده ایم با کلاس هستند. ممکن است برایتان سوال باید که برای دسته بندی کردن سلکتور ها، حتما باید از یک نوع باشند؟
جواب این سوال منفی است. شما می توانید سلکتور های مختلفی را در یک دسته قرار دهید.
به عنوان مثال در تکه کد زیر سه سلکتور ID، Class و Type را در یک دسته قرار داده ایم:
.error, #info, li { margin: 41px 22px 12px 20px; padding: 29px; color: green; background-color: green; display: flex; } #info { color: red; } .error { color: blue; } li { color: green; }
خب اینم از این.
سلکتور های ترکیبی
ممکن است در دنیای وب دیده باشید که در فایل های Css چندین سلکتور را در کنار همدیگر می نویسند. به همچین حالتی اصطلاحا ترکیب سلکتور ها گفته می شود.
ممکن است در یک صفحه Html چندین تگ p داشته باشیم اما فقط بخواهیم تگ های p را انتخاب کنیم که داخل تگ div قرار دارند. به عنوان مثال تکه کد Html زیر را در نظر بگیرید:
<p>Text 1</p> <div> <p>Text 2</p> <p>Text 3</p> </div> <p>Text 4</p>
قصد داریم فقط دو تا تگ p که داخل div قرار دارند را انتخاب کنیم. در همچین حالتی از سلکتور نسل (سلکتور Descendant) استفاده می کنیم. مثل تکه کد زیر:
div p { color: red; }
مفهوم همچین سلکتوری این است که فقط تگ های p را انتخاب کند که داخل تگ div قرار دارند. می توانیم با سلکتور نسل حتی بیشتر از والد پیش رویم. به عنوان مثال کد Html زیر را در نظر بگیرید:
<ul> <li>List 1</li> <li>List 2</li> </ul> <div> <ul> <li>List 1</li> <li>List 2</li> </ul> </div>
در همچین تکه کد Html فرض کنید می خواهیم آن دسته از تگ های li را انتخاب کنیم که داخل ulی قرار دارند که داخل div است! (پیچیده نیستا :))
div ul li { color: red; }
دیدید پیچیده نیست؟!
اما سلکتور نسل نه تنها فرزندان مستقیم را انتخاب می کند، بلکه نوه هایش را نیز انتخاب می کند. تکه کد زیر را در نظر بگیرید:
<nav> <p> Text 1 </p> <div> <p>Text 2</p> </div> </nav>
اگر برای تکه کد بالا کد Css زیر را بنویسیم:
nav p { color: red; }
حتی تگ های p را که داخل تگ div هستند را نیز انتخاب می کند (این تگ های p همان نوه های تگ nav هستند). اما ممکن است در پروژه ای قصد داشته باشید فقط و فقط فرزند های مستقیم والدی را انتخاب کنید.
برای همچین حالتی از سلکتور فرزند یا همان Child Selector استفاده می کنیم.
به عنوان مثال در تکه کد Html بالا اگر بخواهیم فقط فرزندان مستقیم تگ nav را انتخاب کنیم، به شکل زیر عمل می کنیم:
nav > p { color: red; }
با همچین کدی فقط تگ های p که فرزند مستقیم nav هستند انتخاب شده و رنگ آن ها قرمز می شود و تگ های p که div هستند انتخاب نمی شوند. به همین راحتی.
علاوه بر این دو سلکتور، ممکن است حالتی باید که نیاز داشته باشید خواهر یا برادر یک المنت را انتخاب کنید. یعنی المنتی را انتخاب کنید که دقیقا در کنار المنت مورد نظر شما قرار دارد. به همچین سلکتوری Adjacent Sibling Selector گفته می شود.
به تکه کد زیر توجه کنید:
<h1 id="head">Text 1</h1> <h1>میخوایم این المنت رو انتخاب کنیم</h1> <h1>Text 2</h1> <h1>Text 3</h1>
اصطلاحا به این h1 ها که داخل یک والد و در کنار هم قرار دارند، خواهر برادر گفته میشه. حال فرض کنید می خواهیم به کمک h1 با آیدی head، تگ h2 بعدی را انتخاب کنیم.
در این حالت به شکل زیر عمل می کنیم:
#head + h1 { color: red; }
همچین سلکتوری یعنی دقیقا آن تگ h2 را انتخاب کن که بعد از المنت با آیدی head قرار دارد. با همچین تکه کد Css فقط رنگ المنت h2 دوم قرمز خواهد شد.
اما این سلکتور نیز ممکن است در برخی از موقعیت ها نیاز شما را برطرف نکند. چون ممکن است قصد داشته باشید تمام خواهر و برادر های المنت مورد نظرتان را انتخاب کنید، در حالی که Adjacent Sibling Selector فقط المنت هم سطح بعدی را انتخاب می کند.
برای انتخاب همه داداشا و آبجیای یه المنت، از سلکتوری به اسم General Sibling Selector استفاده می کنم. به عنوان مثال تکه کد Html زیر را در نظر بگیرید:
<div> <h1 id="head">Text 1</h1> <h1>میخوایم این المنت رو انتخاب کنیم</h1> <h1>Text 2</h1> <h1>Text 3</h1> <p>Paragraph1</p> <h1>Text 4</h1> <p>Paragraph2</p> <h1>Text 5</h1> </div>
قصد داریم تمام آبجی و داداشای المنت با آیدی head که h1 باشند را انتخاب کنیم. المنت h1 اول با آیدی head چند تا خواهر برادر به اسم h1 دارد؟ 5 تا.
اگر بخواهیم تمام آن ها را انتخاب کنیم، به شکل زیر عمل می کنیم:
#head ~ h1 { color: red; }
بعد از این سلکتور ها به سلکتور concat می رسیم که می توانیم به کمک آن چندین سلکتور را به هم دیگر بچسبانیم.
فرض کنید چند تگ p و h1 با کلاس های یکسان دارید اما قصد دارید که می خواهید فقط تگ های p با کلاس خاص را انتخاب کنید. به عنوان مثال به تکه کد زیر توجه کنید:
<div> <h1 class="text" id="head">Text 1</h1> <h1 class="text">میخوایم این المنت رو انتخاب کنیم</h1> <h1 class="text">Text 2</h1> <h1 class="text">Text 3</h1> <p class="text">Paragraph1</p> <h1 class="text">Text 4</h1> <p class="text">Paragraph2</p> <h1 class="text">Text 5</h1> </div>
در همچین حالتی اگر بخواهیم فقط برای تگ های p که کلاس text دارند استایل مورد نظرمان را اعمال کنیم، نمی توانیم از Class Selector استفاده کنیم. چون که در این صورت تگ های h1 هم استایل ها را خواهند گرفت.
پس در همچین حالتی از اتصال سلکتور ها به همدیگر استفاده می کنیم. به تکه کد زیر توجه کنید:
p.text { color: red; }
به همین راحتی. دو سلکتور Type و Class را به همدیگر چسبانده و فقط برای تگ های p رنگ قرمز اعمال کردیم که کلاس text دارند.
سلکتور های Css بر اساس اتربیوت
همان طور که می دانید تگ های input در Html اتربیوت هایی مثل type، placeholder و value دارند. حال فرض کنید چند input با اتربیوت های مختلف دارید و می خواهید فقط و فقط input هایی را انتخاب کنید که مثلا type آن ها password باشد. در همچین حالتی از Attribute Selector استفاده می کنیم.
اگر بخواهیم از این دسته از سلکتور ها در Css استفاده کنیم، صفت مورد نظرمان را داخل براکت ([ ]) قرار می دهیم.
به عنوان مثال فرض کنید می خواهیم تمام المنت هایی که صفت class دارند را انتخاب کنیم. باید طبق کد زیر عمل کنیم:
[class] { color: red; }
با همین تکه کد Css، تمام المنت هایی که اتربیوت class را داشته باشند قرمز رنگ خواهند شد.
حال فرض کنید می خوانیم آن دسته از تگ های h1 را انتخاب کنیم که کلاس text دارند. طبق کد زیر عمل می کنیم:
h1[class = "text"] { color: red; }
به همین راحتی.
حال قصد داریم المنت های input را انتخاب کنیم که type آن ها password باشد. باید طبق کد زیر پیش رویم:
input[type = "password"] { color: red; }
یا به عنوان مثال قصد داریم تگ های a که اتربیوت target آن ها برابر با _blank است را انتخاب کنیم. طبق کد زیر عمل می کنیم:
a[target="_blank"] { text-decoration: underline; }
حال ممکن است بخواهیم بنا به اتربیوت های المنت آن را انتخاب کنیم اما نخواهیم اتربیوت مورد نظر ما دقیقا برابر با مقدار خاصی باشد. مثلا در موقعیت قرار گرفتیم که می خواهیم input هایی که اتربیوت name آن ها را user شروع می شوند را انتخاب کنیم. در همچین حالتی در کنار کاراکتر مساوی (=) که داخل براکت استفاده می کنیم، یک کاراکتر کَرِت (^) نیز قرار می دهیم. به تکه کد زیر توجه کنید:
input[type^="user"] { border-radius: 12px; }
این سلکتور می تواند بیشتر برای تگ های a مورد استفاده قرار بگیرد. همان طور که می دانید تگ های a اتربیوتی با عنوان href دارند که می تواند آدرس اینترنتی یا # باشد. فرض کنید قصد داریم تمام تگ های a که href آن ها لینک خارجی هستند را انتخاب کرده و استایل های خاصی را برای آن ها اعمال کنیم. همان طور که می دانید لینک ها با https شروع می شوند. پس سلکتور مورد نیاز با به صورت زیر خواهد بود:
a[href^="http://"] { color: red; }
به همین راحتی و خوشمزگی.
حال ممکن است حالتی بخواهید المنتی را به کمک اتربیوت انتخاب کنید که مقدار اتربیوت مورد نظر شما با کلمه خاصی تمام شود. به عنوان مثال کلمات userName، adminName و secretaryName را در نظر بگیرید که ممکن است برای صفت name، id یا class چند input تعیین کنید و سپس به آن ها استایل دهید. در همچین حالتی باید اینپوت هایی را انتخاب کنیم که مثلا صفت class آن ها با کلمه Name تمام می شوند. پس طبق کد زیر عمل می کنیم:
input[class$="Name"] { }
یعنی دقیقا مثل حالت قبل عمل می کنیم، با این تفاوت که به جای ^ از کاراکتر $ استفاده می کنیم. این هم از این سلکتور. بریم سراغ سلکتور بعدی (مگه Css اینقد سلکتور داشت آخه؟ :))
در سلکتور های قبلی می توانیم کل اتربیوت یا ابتدا و انتهای اتربیوت خاصی را بررسی کرده و المت مورد نظرمان را انتخاب کنیم. اما ممکن است حالتی پیش بیاید که بخواهیم المنت هایی را انتخاب کنیم که در فلان اتربیوتش کلمه ای وجود داشته باشد (مهم نیست که کلمه مورد نظر ما در اول، وسط یا انتهای مقدار اتربیوت باشد). در همچین حالتی به جای علامت های ^ و $ از علامت * استفاده می کنیم.
تکه کد Html زیر را در نظر بگیرید:
<div> <img src="img.jpg" alt="box1" /> <img src="img_thumbnail-for-box.png" alt="box2" /> <img src="img_thumbnail-test.png" alt="box3" /> <img src="img_thumbnail.jpg" alt="box4" /> <img src="img_thumbnail-five.jpg" alt="box5" /> </div>
حال فرض کنید قصد داریم آن دسته از المت های img را انتخاب کنیم که در اتربیوت src آن ها کلمه thumbnail وجود داشته باشد. در همچین حالتی طبق تکه کد زیر عمل می کنیم:
img[src*="thumbnail"] { border-radius: 100px; }
سلکتور بعدی برای حالتی است که مقدار اتربیوت مورد نظر ما دارای کاراکتر Dash یا همان خط تیره (-) باشد. به عنوان مثال کد Html زیر را در نظر بگیرید:
<html lang="fa-IR"></html>
همان طور که مشاهده می کنید، در مقدار اتربیوت lang یک کاراکتر (-) وجود دارد. اگر بخواهیم المنت html را به کمک کلمه قبل از – در اتربیوت lang انتخاب کنیم، به شکل زیر عمل می کنیم:
html[lang|="fa"] { }
البته همان طور که قبل تر یاد گرفتید، در همچین حالتی می توان به روش زیر نیز عمل کرد:
html[lang^="fa-"] { margin: 0; padding: 0; }
و اما نکته آخر این است که می توانیم چندین اتربیوت را در کنار هم نیز قرار دهیم. به عنوان مثال قصد داریم آن دسته از المنت های input را انتخاب کنیم که type آن ها password بوده و name آن ها با کلمه user شروع شود. در همچین حالتی طبق کد زیر عمل می کنیم:
input[type="password"][name^="user"] { border: 2px solid lightgray; }
شبه کلاس ها و المنت های مجازی در Css
تا همین قسمت تعداد بسیار زیادی از سلکتور های Css را برای شما عزیزان معرفی کردیم که قطعا با خیلی از آن ها آشنا نبودید. در این قسمت قصد داریم به معرفی شبه کلاس ها و المنت های مجازی بپردازیم که دسته ای از سلکتور های Css محسوب می شوند. اما از آن جایی که هر کدام از آن ها مباحث و توضیحات خاص خودشان را دارند، در این مقاله به توضیح مفصل آن ها نمی پردازیم، بلکه در آینده برای هر کدام از آن ها مقاله های جداگانه ای برای شما عزیزان آماده خواهیم کرد.
منظور از المنت های مجازی همان pseudo-element ها هستند که در Css به 5 قسمت زیر تقسیم می شوند:
- after
- before
- selection
- placeholder
- first-line
- first-letter
که می توانیم به کمک آن ها قسمتی از المنت را تغییر دهیم و گاها المنت هایی را از طریق Css به Html اضافه کنیم. المنت هایی که واقعا در Html وجود ندارند و مجازی هستند.
همچنین شبه کلاس ها نیز به تعداد و دسته های مختلف زیر تقسیم می شوند:
- focus
- hover
- active
- link
- dir
- lang
- default
- read-only
- checked
- valid
- invalid
و … کلی شبه کلاس دیگه که می توانیم به کمک هر کدام از آن ها قسمت دلخواه المنتی را در موقعیت خاصی انتخاب کرده و استایل های مورد نظرمان را اعمال کنیم.
سخن پایانی
ممکن است در این قسمت از مقاله با خودتان بگویید “مگر Css این همه سلکتور داشت؟!” 🙂
در این مقاله سعی کردیم به معرفی سلکتور های Css بپردازیم تا شما عزیزان به عنوان یک برنامه نویس فرانت اند بتوانید با همه آن ها آشنایی کافی را داشته باشید.
اگر در هر کدام از سلکتور های معرفی شده مشکلی دارید و متوجه نشدید، پیشنهاد می کنم ویدئوی مقاله را نیز مشاهده کنید و اگر سوال و ابهامی داشتید، در قسمت کامنت های مقاله بپرسید.
امیدواریم این مقاله برای شما عزیزان مفید واقع شده باشد.
تا مقاله بعدی خدانگهدار.
سلام خسته نباشید
ببخشید کار :where چیه میشه توضیح بدید؟
سلام عزیز.
برای آشنایی با عملکرد و نحوه استفاده از سلکتور where این لینک رو مطالعه کنید 👌❤️
سلام و خداقوت
خیلی مقاله ی کاملی بود واقعا
فقط اگه میشه لینک المنت های مجازی و شبه کلاس ها رو هم تو همین پست قرار بدین
مچکر
سلام عزیز.
تمام موارد مورد نیاز تو مقاله آموزش داده شدن.
کدوم لینک مدنظرتون هست؟ 🤔