همان طور که می دانید 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;
}