توی جلسه قبلی آموزش 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 و خیلی هاش حرفه ای هست. اون ها رو هم به مرور یاد میگیرین. نگران نباشین!
