انتخابگرها در CSS

انتخابگرها (Selectors) در CSS برای هدف قرار دادن و اعمال استایل‌ها به عناصر HTML استفاده می‌شوند. انتخابگرها به ما این امکان را می‌دهند که مشخص کنیم کدام عناصر باید تحت تأثیر استایل‌های CSS قرار گیرند. در CSS انواع مختلف انتخابگرها وجود دارد که می‌توانند به صورت ساده یا پیچیده نوشته شوند.

انواع انتخابگرها در CSS

1. انتخابگرهای ساده

   • انتخابگر عنصر (Type Selector): انتخابگر عنصر به تمام عناصر از یک نوع خاص در HTML اعمال می‌شود.

     undefined

     p {
       color: blue;
     }

     در این مثال، رنگ تمام پاراگراف‌ها (<p>) به آبی تغییر می‌کند.

   • انتخابگر ID (ID Selector): انتخابگر ID برای انتخاب یک عنصر خاص با ویژگی id خاص استفاده می‌شود.

     undefined

     #header {
       background-color: yellow;
     }

     در اینجا، فقط عنصری که id="header" دارد، پس‌زمینه زرد رنگ خواهد شد.

   • انتخابگر کلاس (Class Selector): انتخابگر کلاس برای انتخاب تمام عناصر با ویژگی class خاص استفاده می‌شود.

     undefined

     .menu {
       font-size: 18px;
     }

     تمام عناصری که کلاس menu دارند، اندازه فونت آن‌ها به 18 پیکسل تغییر می‌کند.

2. انتخابگرهای ترکیبی

   • انتخابگر فرزند مستقیم (Child Selector): انتخابگر فرزند مستقیم برای انتخاب فرزندانی که مستقیماً درون یک عنصر والد قرار دارند استفاده می‌شود. این انتخابگر با استفاده از > مشخص می‌شود.

     undefined

     div > p {
       color: red;
     }

     در اینجا، فقط پاراگراف‌هایی که به طور مستقیم داخل یک div قرار دارند، رنگ قرمز خواهند داشت.

   • انتخابگر نسل (Descendant Selector): انتخابگر نسل تمام عناصر فرزند (چه مستقیم و چه غیرمستقیم) را انتخاب می‌کند.

     undefined

     div p {
       color: green;
     }

     در اینجا، تمام پاراگراف‌ها (p) که در داخل یک div هستند، رنگ سبز خواهند داشت.

   • انتخابگر هم‌برادر (Adjacent Sibling Selector): این انتخابگر برای انتخاب اولین عنصر که بعد از یک عنصر مشخص قرار دارد، استفاده می‌شود. از + برای این انتخابگر استفاده می‌شود.

     undefined

     h1 + p {
       font-weight: bold;
     }

     در اینجا، اولین پاراگراف بعد از هر تگ h1 به صورت بولد (پررنگ) نمایش داده خواهد شد.

   • انتخابگر برادر (General Sibling Selector): این انتخابگر برای انتخاب تمام برادران (عناصر با همان والد) بعد از یک عنصر خاص استفاده می‌شود. از ~ برای این انتخابگر استفاده می‌شود.

     h1 ~ p {
       color: orange;
     }
     

     در اینجا، تمام پاراگراف‌ها که بعد از یک h1 قرار دارند، رنگ نارنجی خواهند داشت.

3. انتخابگرهای کاذب (Pseudo-classes)

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

     undefined

     a:hover {
       color: red;
     }

     در اینجا، وقتی موس روی لینک‌ها قرار گیرد، رنگ آن‌ها به قرمز تغییر خواهد کرد.

   • first-child:: این انتخابگر برای انتخاب اولین فرزند یک عنصر خاص استفاده می‌شود.

     undefined

     p:first-child {
       font-size: 20px;
     }

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

   • last-child:: این انتخابگر برای انتخاب آخرین فرزند یک عنصر خاص استفاده می‌شود.

     undefined

     p:last-child {
       color: blue;
     }

     در اینجا، آخرین پاراگراف درون یک والد، رنگ آبی خواهد داشت.

   • ()nth-child:: این انتخابگر برای انتخاب فرزندهایی با موقعیت خاص در بین فرزندان یک عنصر استفاده می‌شود.

     undefined

     p:nth-child(2) {
       color: purple;
     }

     در اینجا، دومین پاراگراف در یک والد رنگ بنفش خواهد داشت.

   • ()not:: این انتخابگر برای انتخاب همه عناصر به جز یک عنصر خاص استفاده می‌شود.

     undefined

     p:not(.special) {
       color: gray;
     }

     در اینجا، تمام پاراگراف‌ها به جز آن‌هایی که کلاس special دارند، رنگ خاکی خواهند داشت.

4. انتخابگرهای کاذب برای عناصر

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

     undefined

     p:before {
       content: "→ ";
     }

     در اینجا، علامت → قبل از هر پاراگراف نمایش داده می‌شود.

   • after:: این انتخابگر برای افزودن محتوای بعد از یک عنصر استفاده می‌شود.

     undefined

     p:after {
       content: " ←";
     }

     در اینجا، علامت ← بعد از هر پاراگراف نمایش داده می‌شود.

5. انتخابگرهای گروهی (Group Selectors) انتخابگرهای گروهی به شما این امکان را می‌دهند که چندین انتخابگر را به صورت هم‌زمان در یک بلوک CSS استفاده کنید.

   undefined

   h1, h2, h3 {
     font-family: Arial, sans-serif;
   }

   در اینجا، تمام تگ‌های <h1>, <h2>, و <h3> از فونت Arial استفاده خواهند کرد.

6. انتخابگرهای ویژگی (Attribute Selectors) این انتخابگر برای انتخاب عناصر با ویژگی خاص استفاده می‌شود.

   • انتخابگر با ویژگی خاص:

     undefined

     input[type="text"] {
       background-color: lightblue;
     }

     در اینجا، تمام عناصر input با ویژگی "type="text پس‌زمینه‌ای به رنگ آبی روشن خواهند داشت.

   • انتخابگر برای ویژگی‌هایی که شامل یک مقدار خاص هستند:

     undefined

     a[href^="https"] {
       color: green;
     }

     در اینجا، تمام لینک‌هایی که با https شروع می‌شوند، رنگ سبز خواهند داشت.

خلاصه

انتخابگرهای CSS ابزارهایی هستند که به شما این امکان را می‌دهند که استایل‌ها را به‌طور دقیق‌تر به عناصر مختلف HTML اعمال کنید. با استفاده از انتخابگرها، می‌توانید استایل‌ها را به صورت خاص یا عمومی برای تگ‌ها، کلاس‌ها، IDها، ویژگی‌ها، و همچنین براساس وضعیت‌های خاص عناصر تعیین کنید.