آشنایی با سلکتورها در CSS

با سلام خدمت دوستان عزیز. هر جا هستین سلامت و تندرست و خوش باشین
دوس دارم در رابطه با سلکتورها در CSS مطالبی رو که یاد دارم به اشتراک بزارم شاید مورد استفاده دوستان قرار بگیره.
مطالبی رو که در زیر قرار میدم ترجمه هایی هست که از سایت W3schools کردم و اونها رو در اختیارتون قرار میدم و لینک ها رو هم قرار میدم تا بتونید تو خود سایت برید و کدها رو بتونید ویرایش بکنید.

آشنایی با سلکتورها در CSS

1- سلکتورهای ساده که عناصر ایچ تی ام ال را بر اساس نام تگ آی دی (id) و کلاس (class) انتخاب می کنند.
سلکتور element که عناصر ایچ تی ام ال را بر اساس نام تگ انتخاب می کند.
مثال:
در اینجا تمام تگ های p صفحه که وسط چین هستند بوسیله خصوصیت و پروپرتی color به رنگ قرمز تبدیل می شوند:

element selector

سلکتور id در CSS

سلکتور id با استفاده از اتریبیوت یک عنصر ایچ تی ام ال یک تگ خاص را انتخاب می کند.
آی دی یک عنصر منحصر بفرد به شمار رفته و فقط یک بار می توان در صفحه از آن استفاده نمود.
برای انتخاب یک عنصر با id خاص ابتدا کاراکتر # را قرار داده و سپس آی دی عنصر را تایپ می کنیم.
مثال:
استایل (rule) سی اس اس زیر بر روی عنصر ایچ تی ام الی که آی دی para1 دارد اعمال خواهد شد:

id Selector

نکته: یک آی دی نمی تواند با یک عدد شروع شود!

سلکتور class در CSS

سلکتور کلاس تمام عناصر ایچ تی ام ال را بوسیله یک اتریبیوت class مشخص انتخاب می کند.
برای انتخاب عنصری که یک کلاس مشخص و خاص دارد ابتدا کاراکتر دات (.) را قرار داده و سپس نام کلاس را تایپ می کنیم.
مثال:
در این مثال تمام عناصر ایچ تی ام ال که کلاس center دارند انتخاب شده و رنگ آنها قرمز و تراز آنها وسط چین می شود:

center.

شما همچنین می توانید استایل ها را فقط برای عنصری که تحت تاثیر یک کلاس است مشخص بکنید.
مثال:
در این مثال تنها عنصر p که کلاس center دارد وسط چین می شود:

p.center

عناصر ایچ تی ام ال همچنین می توانند بیشتر از یک کلاس داشته باشند.
مثال:
در این مثال عنصر پی که کلاس های center و large دارد استایل دهی خواهد شد:

"p class="center large

نکته: نام یک کلاس نمی تواند با یک عدد شروع شود!

سلکتور universal (*) در CSS

سلکتور * تمام عناصر ایچ تی ام ال یک صفحه را انتخاب می کند.
مثال:
استایل سی اس اس زیر تمام عناصر ایچ تی ام ال را انتخاب می کند:

Universal Selector

سلکتورهای دسته جمعی در سی اس اس (grouping selector)

این سلکتورها تمام عناصر ایچ تی ام الی را که خصوصیت های مشابهی داشته باشند را انتخاب می کند.
در کد سی اس اس زیر مشاهده می کنید که عناصر h2 , h1 و p استایل های مشابهی دارند.
بهتر است که سلکتورهای دسته جمعی بصورت خلاصه و مینی مایز شده استفاده شوند.
برای اینکه این سلکتورها را انتخاب کنیم باید آنها را بوسیله کاما (,) از هم جدا کنیم:

Grouping Selector

امیدوارم که مورد استفادتون قرار بگیره