سلکتور نوع المان (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
