سلکتور نوع المان در CSS

سلکتور نوع المان (Type Selector) یکی از رایج‌ترین و پرکاربردترین سلکتورها در CSS محسوب می‌شود. این گزینشگرها، المان ها را براساس نام یا نوع المان برای تعیین استایل سی‌اس‌اس انتخاب می‌کنند. به همین دلیل معمولا این سلکتورها با عنوان سلکتور نام المان یا نام تگ نیز شناخته می‌شوند.

بیشتر بخوانید: آشنایی با سلکتورها و انواع آن‌ها در CSS

شیوه درج و استفاده از سلکتور نوع المان در CSS

در سلکتورهای نوع المان، صرفا نام المان یا تگ بدون کاراکترهای < یا > ظاهر می‌شود. به این ترتیب تمام المان‌هایی از نوع موردنظر که داخل سند قرار دارند انتخاب می‌شوند. سینتکس کلی یک قانون با یک سلکتور نوع المان به صورت زیر است:

element-name {
  ...
}

به عنوان یک مثال ساده برای انتخاب تمام المان های <h2> یا هدینگ های سطح دوم می‌توانید مشابه با نمونه زیر از گزینشگر h2 استفاده کنید. با توجه به بخش گزینشگرها و اظهاریه در این مثال، رنگ متن تمام هدینگ های سطح دوم موجود در سند روی آبی تنظیم می‌شود.

h2 {
  color: blue;
}

به عنوان مثالی دیگر برای انتخاب تمام المان های <span> لازم است از سلکتور span استفاده کنید. با توجه به بخش گزینشگرها و اظهاریه در این مثال، رنگ متن تمام المان های <span> روی قرمز تنظیم می‌شود.

span {
  color: red;
}

فرض کنید در بخش بدنه (یا <body>) سند HTML، یک هدینگ سطح دو (یا المان <h2>) و یک پاراگراف (یا المان <p>) شامل دو المان <span> مشابه با نمونه زیر وجود دارد.

<h2>My Heading</h2>
<p><span>This is</span> a simple <span>paragraph</span>.</p>

در ادامه نتیجه اعمال دو قانون CSS فوق روی این صفحه ساده HTML را مشاهده می‌کنید. با توجه به نتیجه، همانطور که مشاهده می‌کنید متن هدینگ سطح دو دارای رنگ آبی و متن المان های <span> موجود در سند نیز رنگ قرمز خواهند داشت. مابقی پاراگراف نیز با رنگ پیشفرض سیاه نمایش داده می‌شود.

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

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *