آموزش CSS – فصل سوم: انتخابگرها

انتخابگر های سی اس اس برای پیدا کردن یا انتخاب کردن المان های HTML بر اساس نام المان، id، کلاس، خاصیت و غیره استفاده می شوند. فصل سوم آموزش گام به گام CSS نتران، به انتخابگر ها و نحوه انتخاب یک المان موجود در کد های HTML، برای اجرای دستورات CSS بر روی آن اختصاص دارد.

آموزش CSS – فصل سوم: انتخابگرها

در CSS راه حال های مختلفی برای انتخاب یک المان وجود دارد. به طور کلی شما می توانید از نام المان، کلاس های المان، id المان، یا attribute های آن برای انتخاب آن المان در CSS استفاده کنید.

انتخابگر المان

انتخابگر المان، المان را بر اساس اسم المان انتخاب می کند.

به عنوان مثال شما می توانید تمام المان های <p> در یک صفحه را به روش مثال زیر انتخاب کنید.

در مثال زیر تمام المان های <p> در وسط قرار میگیرند با یک متن قرمز شده:


انتخابگر id

انتخابگر id از خاصیت id که بر روی یکی از المان های اچ تی ام ال است استفاده می کند تا یک المان خاص را انتخاب کند.

در HTML شما از نظر منطقی فقط می توانید یک المان با یک id خاص داشته باشید. البته که می توانید چند المان هم داشته باشید ولی کد های شما استاندارد نخواهد بود.

برای انتخاب یک المان با یک id خاص یک کارکتر هش # بنویسید و در ادامه id آن المان را بنویسید.

دستور سی اس اس زیر بر روی المان با آی دی test اعمال می شود:


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

انتخابگر کلاس

انتخابگر کلاس، المان ها را بر اساس خاصیت یا همان attribute کلاس انتخاب می کند.

برای انتخاب المان ها با کلاس خاص، یک کاراکتر نقطه . بگذارید و در ادامه نام کلاس را بنویسید.

در مثال زیر تمام المان های اچ تی ام ال  با کلاس center قرمز خواهند بود و در وسط جهت گیری می گیرند:


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

در مثال زیر فقط المان های <p> با کلاس center در وسط جهت گیری میشوند:


همچنین به المان های اچ تی ام ال میتوان بیش از یک کلاس داد. در مثال زیر المان <p> طبق دو کلاس center و large استایل دهی می شود:


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

انتخاب کردن چند المان با هم

اگر شما المان هایی با دستورات سی اس اس یکسان دارید، یعنی چیزی مانند مثال زیر:


بهتر است برای کمتر کردن تعداد کد ها، از چند انتخابگر بر روی یک دستور استفاده کنید.

برای جمع بستن انتخابگر ها، هر انتخابگر را با یک کما از هم جدا کنید.

در مثال زیر ما انتخابگر های کد بالا را جمع بسته ایم:


انتخاب کردن همه المان ها با هم

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


انتخاب المان های دارای یک خاصیت

در CSS شما می توانید المان ها را بر اساس خاصیت هایی که دارند انتخاب کنید. مثلا شما می توانید <input type="text"/> را در CSS اینگونه انتخاب کنید:


ویدیوها و مطالب مشابه