سلام دوستان، در اولین جلسه از دوره جامع آموزش Css، قصد داریم درباره سلکتورها در css با هم صحبت کنیم. سلکتورها یکی از اصلی‌ترین و پایه‌ای‌ترین مفاهیم css و طراحی سایت هستن. دوستای گلم ممکنه بعد از خوندن این آموزش احساس کنید مطلب ساده‌ای رو یاد گرفتید و یه جورایی بهش بی اعتنایی کنید. اما باید بدونید که سلکتورها اگرچه که از نظر مفهوم ساده هستن و خیلی زود می‌تونید متوجه کاربرد و نحوه استفاده از اونها بشید، نباید نسبت به اونها کم توجه باشید. هرچقدر شما توی استفاده از سلکتورها ماهرتر بشید بهتر می‌تونید از دستورات css استفاده کنید. در نتیجه به مرور زمان به طراح سایت بهتری تبدیل میشید. حالا بریم ببینیم این سلکتور که همین اول کاری کلی تحویلش گرفتیم دقیقا چیه و چه کاری انجام میده.
سلکتور چیه و چه کار میکنه؟؟
اجازه بدید این قسمت رو با یه مثال از دنیای واقعی شروع کنم. فرض کنید شما و چندین نفر آقا و خانم از گروه‌های مختلف توی یه سالن جمع شدید و قراره طبق یه سری آیین نامه‌های موجود دسته‌بندی بشید(دقیقا نمیدونم چرا؟!?). حالا سخنران میاد روبروی جمع می‌ایسته و میگه لطفا خانم مریم محمدی با شماره ملی …….. تشریف بیارن. مسلما توی این جمع ممکنه خانم‌های زیادی حضور داشته باشن. حتی ممکنه اسم خیلی‌هاشون مریم محمدی باشه، اما وقتی کدملی هم خونده میشه پس ما دنبال یک نفر هستیم نه بیشتر. اما ممکنه همون سخنران بگه تمام خانم‌های حاضر در سالن تشریف بیارن. و یا ممکنه تمام خانم‌هایی که مدرک تحصیلی کارشناسی دارن، مجرد هستن و کمتر از 30 سال سن دارن رو مخاطب قرار بده.
همونطور که میبینید برای دسته‌بندی افراد حاضر در جمع می‌تونیم با توجه به نیازمون، افراد رو فیلتر و دسته‌بندی کنیم. جالبه بدونید که شما هم به عنوان طراح سایت و در حین طراحی به چنین امکانی نیاز دارید. برای مثال فرض کنید قصد داشته باشید رنگ و یا فونت یکی از متن‌های سایتتون رو تغییر بدید. همچنین ممکنه نیاز داشته باشید رنگ یک دسته و یا گروه از متن‌ها رو تغییر بدید. در اینصورت شما به معیار یا معیارهایی برای دسته‌بندی تگ‌های html صفحه سایتتون دارید. این معیار دسته‌بندی دقیقا همون سلکتور هست. برای اینکه بهتر متوجه بشید، بیاید با هم به شکل زیر نگاه کنیم.
توی این شکل یه سری المان html که با مستطیل و یه سری استایل css (مثل رنگ و فونت و…) داریم که با دایره نشون داده شدن. قصد داریم مستطیل آبی رنگ رو استایل‌دهی کنیم (برای مثال تغییر رنگ پس زمینه و سایز). به این منظور باید با استفاده از یک سلکتور مسطتیل مشخص شده با رنگ آبی رو انتخاب و استایل‌های مورد نظرمون رو به اون اعمال کنیم.
مسئله وراثت در استایل‌دهی
یکی از نکات مهمی که یه طراح سایت باید بدونه و خیلی بهش توجه کنه، وراثت هست. وراثت یا ارث‌بری به این معنیه که وقتی والد یه ویژگی داره، این ویژگی به فرزند هم به ارث میرسه. برای اینکه این موضوع رو بهتر متوجه بشید به شکل زیر توجه کنید. توی شکل زیر مستطیل آبی رنگ رو میبینید که والد مستطیل نارنجی رنگ هست(وقتی شما تگ 1 رو درون تگ 2 می‌نویسید، تگ 2 نقش والد و تگ 1 نقش فرزند داره). در نتیجه اگه شما استایلی مثل رنگ یا فونت رو به مستطیل آبی رنگ نسبت بدید، مستطیل نارنجی رنگ هم این استایل‌ها رو به خودش میگیره. اگه دوست داشته باشید که برای مثال رنگ و فونت فرزند از والد متفاوت باشه، باید استایل مربوط به رنگ و فونت رو بازنویسی کنید. برای بازنویسی یک استایل کافیه مجددا مقدار اون رو تغییر بدید. دوستای گلم ممکنه الان بپرسید چطور باید این کار رو بکنم؟!!!. در جواب باید بگم که نگران نباشید و فعلا فقط این مفاهیم رو درک کنید، در ادامه و توی جلسه‌های بعدی تک تک این مفاهیم رو به صورت عملی پیاده‌سازی می‌کنیم.
سلکتورها در css
در css سلکتورهای زیاد و مختلفی داریم که به مرور و طی جلسات عملی کار با اونها رو یاد می‌گیرید. اما به طور کلی سه دسته اصلی از سلکتورها وجود داره که باید اونها رو بشناسید. این سه گروه رو در ادامه بهتون معرفی کردم.
- id: اولین نوع سلکتور، استفاده از خصیصه id هست. استفاده از id معادل همون مثالیه که سخنران از خانم مریم احمدی با کد ملی …. خواست که تشریف بیارن. یعنی بین همه حضار فقط و فقط یک نفر مد نظرمون هست. بنابراین شما زمانی از id به عنوان سلکتور استفاده می‌کنید که قصد استایل دهی به فقط یک المان مشخص در صفحه html رو داشته باشید.
- class: نوع دوم سلکتور که بیشتر استفاده میشه class هست. استفاده از class به عنوان سلکتور دقیقا مثل این میمونه که سخنران از همه خانم‌های دارای مدرک کارشناسی درخواست کنه که تشریف بیارن. یعنی شما زمانی از class به عنوان سلکتور استفاده می‌کنید که قصد داشته باشید تعدادی استایل یکسان و مشخص رو به یک گروه از تگ‌های html نسبت بدید.
- tag name: سومین نوع سلکتور که نسبت به نوع اول و دوم کمتر استفاده میشه، استفاده از نام تگ هست. برای مثال فرض کنید سخنران از همه خانم‌ها درخواست کنه روی صندلی بشینن. میبینید که هیچ استثنایی وجود نداره و همه خانم‌ها مخاطب این صحبت هستن. بنابراین شما زمانی از این سلکتور استفاده می‌کنید که قصد داشته باشید استایل همه تگ‌های همنوع تغییر کنه. برای مثال رنگ همه تگ‌های <p> نارنجی بشه. توصیه من اینه که سعی کنید اصلا از این سلکتور استفاده نکنید چون با بزرگتر شدن پروژه و زیاد شدن کدهای css، این سلکتور براتون دردسر ساز میشه.
حرف آخر
تا به اینجا فهمیدیم سلکتور چیه و چه کاربردی داره. همچنین سه نوع اصلی و عمده سلکتورها رو هم شناختیم. در ادامه و در جلسات بعدی خیلی خوب متوجه کاربرد عملی و روش استفاده از این مفاهیم میشید. بنابراین نگران نباشید و فقط سعی کنید مفهوم صحبت‌های گفته شده رو درک کنید و به خاطرتون بسپارید.
