با سلام خدمت دوستان عزیز. هر جا هستین سلامت و تندرست و خوش باشین
دوس دارم در رابطه با سلکتورها در CSS مطالبی رو که یاد دارم به اشتراک بزارم شاید مورد استفاده دوستان قرار بگیره.
مطالبی رو که در زیر قرار میدم ترجمه هایی هست که از سایت W3schools کردم و اونها رو در اختیارتون قرار میدم و لینک ها رو هم قرار میدم تا بتونید تو خود سایت برید و کدها رو بتونید ویرایش بکنید.
1- سلکتورهای ساده که عناصر ایچ تی ام ال را بر اساس نام تگ آی دی (id) و کلاس (class) انتخاب می کنند.
سلکتور element که عناصر ایچ تی ام ال را بر اساس نام تگ انتخاب می کند.
مثال:
در اینجا تمام تگ های p صفحه که وسط چین هستند بوسیله خصوصیت و پروپرتی color به رنگ قرمز تبدیل می شوند:
سلکتور id با استفاده از اتریبیوت یک عنصر ایچ تی ام ال یک تگ خاص را انتخاب می کند.
آی دی یک عنصر منحصر بفرد به شمار رفته و فقط یک بار می توان در صفحه از آن استفاده نمود.
برای انتخاب یک عنصر با id خاص ابتدا کاراکتر # را قرار داده و سپس آی دی عنصر را تایپ می کنیم.
مثال:
استایل (rule) سی اس اس زیر بر روی عنصر ایچ تی ام الی که آی دی para1 دارد اعمال خواهد شد:
نکته: یک آی دی نمی تواند با یک عدد شروع شود!
سلکتور کلاس تمام عناصر ایچ تی ام ال را بوسیله یک اتریبیوت class مشخص انتخاب می کند.
برای انتخاب عنصری که یک کلاس مشخص و خاص دارد ابتدا کاراکتر دات (.) را قرار داده و سپس نام کلاس را تایپ می کنیم.
مثال:
در این مثال تمام عناصر ایچ تی ام ال که کلاس center دارند انتخاب شده و رنگ آنها قرمز و تراز آنها وسط چین می شود:
شما همچنین می توانید استایل ها را فقط برای عنصری که تحت تاثیر یک کلاس است مشخص بکنید.
مثال:
در این مثال تنها عنصر p که کلاس center دارد وسط چین می شود:
عناصر ایچ تی ام ال همچنین می توانند بیشتر از یک کلاس داشته باشند.
مثال:
در این مثال عنصر پی که کلاس های center و large دارد استایل دهی خواهد شد:
نکته: نام یک کلاس نمی تواند با یک عدد شروع شود!
سلکتور * تمام عناصر ایچ تی ام ال یک صفحه را انتخاب می کند.
مثال:
استایل سی اس اس زیر تمام عناصر ایچ تی ام ال را انتخاب می کند:
این سلکتورها تمام عناصر ایچ تی ام الی را که خصوصیت های مشابهی داشته باشند را انتخاب می کند.
در کد سی اس اس زیر مشاهده می کنید که عناصر h2 , h1 و p استایل های مشابهی دارند.
بهتر است که سلکتورهای دسته جمعی بصورت خلاصه و مینی مایز شده استفاده شوند.
برای اینکه این سلکتورها را انتخاب کنیم باید آنها را بوسیله کاما (,) از هم جدا کنیم:
امیدوارم که مورد استفادتون قرار بگیره
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟