آموزش CSS – نحوه انتخاب المان‌های HTML

CSS Selector چیست؟

انتخاب‌ کردن یک المان اچی تی ام ال، یکی از مهمترین قواعد CSS است. در واقع شما برای اینکه یک المان HTML  را درCSS تغییر دهید اول باید  آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن CSS می‌گویند و شما با کمک انتخابگر، المان HTML مورد نظر را انتخاب یا پیدا می‌کنید.

برای صدا کردن یک المان HTML ، نیاز داریم که اسم آن را صدا بزنیم. المان‌های HTML هر کدام نام عمومی اختصاصی خود را دارند. مثلا متون با تگ p شناخته می‌شوند و لینک‌ها با تگ a شناخته می‌شوند. در واقع تگ‌هایHTML نام‌های عمومی هستند و اگر شما از آن‌ها استفاده کنید به نوعی با کلی مخاطب روبرو خواهید شد.

مثلا در زیر ما نوشته‌ایم p و بدین ترتیب هر نوع پاراگرافی که در متن وجود دارد را انتخاب کرده‌ایم.

حالا از خودتان می‌پرسید اگر ما قصد تغییر همه پاراگراف‌ها را نداشته باشیم و تنها بخواهیم یکی از المان‌ها، مثلا پاراگراف سوم را تغییر دهیم چکار باید کنیم؟ اینجاست که استفاده از id و class‌ به کار می‌آید. کلاس و id در واقع بهترین روش برای انتخاب المان‌ها در CSS و HTML است.

برای درک بهترکلاس و ID مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل “محمد” حضور دارند، کلمه “محمد”  را صدا بزنید. در این صورت تمامی محمدها مخاطب شما خواهند شد و به حرف  شما گوش خواهند داد. در CSS هم همین گونه است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های HTML را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.

ID همانندشماره شناسنامه برای افراد است. در واقع شما در همان مثال خیابان شلوغ اگر یک محمد خاص را در نظر داشته باشید می‌توانید از طریق گفتن شماره شناسنامه وی را مستقیما صدا بزنید بدون آنکه کس دیگری را مورد خطاب قرار دهید.

در واقع شما با تخصیص یک id به هر المان HTML صفحه آن را منحصر به فرد می‌کنید. توجه داشته باشید که به هر المانHTML –  ID  منحصر به فرد بدهید و از دادن ID یکسان به چند المان خود داری کنید. استفاده از id برای المان‌ها در موارد بسیاری همچون در جاوا اسکریپت کاربرد فراوانی دارد.

اضافه کردن ID به المان‌های HTML :

در قدم اول ما باید المان‌های HTML مان را دارای یک آی‌دی منحصر به فرد کنیم. مثلا  برای پاراگراف <“p id=”hi> می‌نویسیم که با <p> تفاوت دارد.  چرا که <“p id=”hi> دارای یک آی دی منحصر به فرد با نام hi است که توسط شما و با اضافه کردن اتریبیوت id به دست آمده است.

پس برای اضافه کردن ID به هر المان HTML کلمه ID را در تگ مورد نظر یادداشت کرده و در مقابل آن "نام آی‌دی"= را می‌نویسیم:

ID = ” نام آی‌دی مورد نظر”

حالا که با نحوه‌ی اضافه کردن id به المان‌های HTML آشنا شدیم؛ در قدم دوم وقت آن رسیده است تا آن‌ها را با CSS انتخاب کنیم. برای انتخاب یکID خاص در سی اس اس باید علامت # و سپس نامی که به عنوان ID به المان داده‌ایم را بنویسیم.

برای مثال ما در زیر المان‌هایی که دارای ID منحصر به فرد hi# هستند،  انتخاب کرده‌ایم و قوانین دلخواهمان را بر روی آن اعمال کرده‌ایم.

انتخاب از طریق کلاس:

راه حل دیگر برای تغییر همزمان چند المان استفاده از قابلیت کلاس است. کلاس مانند فامیلی برای همان مثال آدم‌ها و خیابان است. بدین ترتیب که شما این دفعه فامیلی فرد را صدا می‌زنید و ممکن است یک یا چند نفر مخاطب شما باشند. شما با اضافه کردن اتریبیوت class به المان‌های HTML خود می‌توانید به صورت همزمان یک استایل و شمایل دلخواه به همه آن‌ها بدهید. مثلا فرض کنید می‌خواهید تیترهای مطلب را با رنگ آبی نشان دهید و تیترهایی که در کنار صفحه و بالای منوها قرار دارند را با همان رنگ مشکی پیش‌فرض نشان داده شود.

در قدم اول، المان‌های صفحه اچ تی ام ال (هر چند تا که دوست داریم تغییر کنند)‌ کلاس اضافه می‌کنیم.

در این مثال باید به تمامی هدرهایی که در متن قرار دارد کلاس دلخواه را بدهیم. بدین ترتیب تمامی این هدرها که دارای این کلاس شوند از چنین استایلی بهره‌مند خواهند شد.

روش‌های بالا روش‌های کلی انتخاب المان‌های HTML توسط CSS هستند. اما هنوز هم می‌توانید با ترکیب این روش‌ها، دامنه‌ی محدوتری را انتخاب کنید. مثلا اگر قصد داشته باشید بگویید تمامی تگ‌های فلان که دارای کلاس فلان هستند. مثلا تمامی تگ‌های پاراگرافی که دارای کلاس abi هستند. مثال:

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس ABI هستند دیگر مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

 شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است.

نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.