سلکتور ها در CSS - بی اس دیزاین

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

سلکتور ها در CSS میان میگردن المان مورد نظر ما رو پیدا میکنن توی کد و خصوصیت هایی که بهشون دادیم رو منتقل میکنن به اون کدهای HTML . در کل ما ۵ دسته selector داریم .

سلکتورهای ساده (Simple Selectors)
سلکتورهای ترکیبی (Combinator Selectors)
سلکتورهای Pseudo-class
سلکتورهای Pseudo-elements
سلکتورهای ویژگی (Attribute Selectors)

سلکتورهای ساده میان بر اساس اسم یا کلاس صدا زده میشن .
سلکتورهای ترکیبی بر اساس یه رابطه ای تشکیل میشن . (نگران نباشین ! بعدا میفهمین منظورمون رو)
سلکتورهای Pseudo-class بر اساس یه وضعیت خاصی تعریف میشن.
سلکتورهای Pseudo-elements بر اساس یک قسمت از المان تعریف میشن.
و در نهایت سلکتورهای ویژگی هم از اسمشون معلومه. بر اساس یه ویژگی و یا مقدار اون میتونیم تعریف کنیم.

چند تا از رایج ترین سلکتورها رو براتون آموزش میدیم در ادامه. با ما همراه باشین .

سلکتور id در CSS

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

خب برای انتخاب کردن این مقدار های id خیلی راحت میتونیم توی کدنویسی CSS از کاراکتر # استفاده کنیم و بعدش هم اسم مقدار رو بنویسیم . به همین سادگی اون المان رو میگرده پیدا میکنه و این خصوصیت های CSS رو بهش میده .

نکته دیگه ای که باید خاطرتون باشه این هست که مقدار id هیچگاه نمیتونه با عدد شروع بشه و حتما باید با حرف شروع بشه و بعدش میتونیم داخلش عدد بنویسیم.

				
					#para1 {
  text-align: center;
  color: red;
}

سلکتور class در CSS

برای انتخاب کردن مقادیری که به ویژگی class در المان های html میدیم هم خیلی راحت میتونیم با استفاده از علامت . تمام اون ها رو انتخاب کنیم و سلکتورمون با علامت نقطه (.) شروع کنیم و بعدش هم اسم اون مقداری که به class اون المان ها دادیم .

برخلاف ویژگی id المان ها میتونن چندین تاشون class یکسان بگیرند و حتی برای یک المان هم چندین class تعریف کنیم .

				
					.center {
  text-align: center;
  color: red;
}

حالا یکم پیچیده ترش کنیم . فرض کنید ما اومدیم توی html چند تگ h تعریف کردیم و چند تا هم p داریم . حالا میخوایم به همشون ویژگی class یکسان بدیم و بعد بیایم تو css فقط المان های پاراگراف یا p رو بهشون بگیم اگر این کلاس رو داشتن اجرا بشه ! مثال زیر رو ببینین:

				
					p.center {
  text-align: center;
  color: red;
}

الان تو مثال بالا میاد فقط المان های p رو انتخاب میکنه که دارای ویژگی center هستن و کاری به بقیه المان هایی که class و یا ویژگی center براشون تعریف شده نداره .

				
					<p class="center large">This paragraph refers to two classes.</p>

توی مثال بالا هم اومدیم یه المان p تعریف کردیم و برای ویژگی class مقدارهای center و large رو دادیم. برای این المان دقیقا مثال قبلی کاملا کار میکنه و این المان رو هم شامل میشه و ربطی نداره که هم کلاس center داره و هم large ! همین که یکی از اون کلاس ها وجود داشه باشه کافیه.

نکته بعدی هم اینکه مقدار کلاس class نمیتونه با عدد شروع بشه و حتما باید با حروف لاتین شروع بشه .

سلکتور universal در CSS

خیلی ساده است ! یک انتخابی وجود داره در زبان CSS بنام انتخاب کننده همه المان ها ! یعنی هرچی المان هست میاد انتخاب میکنه و خصوصیت هایی که به این المان universal میدین رو روشون اعمال میکنه . این سلکتور با علامت ستاره (*) مشخص میشه .

				
					* {
  text-align: center;
  color: blue;
}

سلکتور گروهی در CSS

گاهی پیش میاد که ما داریم برای چندتا المان کدهای CSS یکسانی مینویسیم . مثلا کدهای CSS پایین رو ببینین:

				
					h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

توی المان های h1 – h2 -p تماما کدهای CSS تکرار شده . این کار بی فایده هست و باعث افزایش حجم فایل CSS میشه و لود صفحه هم در نهایت بالاتر میره و سرعت میاد پایین. حالا چیکار کنیم !؟ مثال پایین رو ببینین:

				
					h1, h2, p {
  text-align: center;
  color: red;
}

فقط کافیه بین اون المان هایی که میخوایم بهشون کد یکسانی بدیم علات کاما انگلیسی (,) بذاریم و المان بعدی رو بنویسیم و در نهایت هم کدهای css رو برای همشون بکار ببریم .

روش های دیگه ای هم وجود داره برای نوشتن سلکتور در CSS و خیلی هاش حرفه ای هست. اون ها رو هم به مرور یاد میگیرین. نگران نباشین‌!