انتخاب گر شناسه ( id selector ) در CSS

انتخاب گر شناسه ( id selector ) در CSS

 

id selector از خصیصه ی شناسه ( HTML )id attribute برای انتخاب یک المان معین بهره می گیرد . یک شناسه داخل صفحه باید منحصر بفرد باشد، بنابراین انتخاب گر شناسه زمانی بکار گرفته می شود که بخواهید یک عنصر تک و منحصر بفرد را انتخاب کنید . جهت انتخاب یک المان با شناسه ی ویژه (مشخص،) باید یک کاراکتر # hash را تایپ کرده و بدنبال این کاراکتر شناسه ی المان را قرار دهید . قانون سبک دهی style rule زیر با شناسه ی para1 به المان HTML اضافه می شوند :

#para1 {
text-align: center;

color: red;
}

توجه هیچگاه اسم شناسه ID name را با یک عدد آغاز نکنید .

 

انتخاب گر کلاس class selector :

انتخاب گر کلاس المان ها را با یک خصیصه ی کلاس / class attribute ویژه آغاز می کند . به منظور انتخاب المان ها با کلاسی معین، یک کاراکتر نقطه و به دنبال آن اسم کلاس را تایپ کنید در مثال زیر، کلیه ی عناصر HTML با کلاس center وسط چین align- center خواهند بود :

.center {
text-align: center;
color: red;
}

همچنین می توان مشخص کرد که تنها عناصر خاصی از HTML دست خوش تغییر یک کلاس معین قرار گیرند (به عبارتی دیگر می توانید تعیین کنید که فقط المان های مدنظر شما توسط یک کلاس کنترل شده و تحت تاثیر آن قرار گیرند) در مثالی که زیر ارائه شده، تمامی المان های  <p> با کلاس center وسط چین align- center می شوند.

p.center {
text-align: center;
color: red;

}

توجه از آغاز کردن اسم کلاس با عدد اکیدا خودداری کنید .

 

 

ادغام گروه ها / گروه بندی انتخاب گرها grouping selectors :

چنانچه المان هایی با تعاریف سبک style definition مشابه به مثال ذیل دارید، در آن صورت می توانید با گروه بندی کدها آنها را سامان دهی کرده و در عین حال اندازه ی کدهای ذکر شده را به حداقل برساند.

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

برای این منظور کافی است انتخاب گرها را با استفاده از ویرگول از هم جدا ساخت . نمونه ی زیر در حقیقت همان تکه کد فوق است که در آن سه گروه مزبور با هم در یک گروه ادغام شده اند و هر گروه با بهره گیری از ویرگول از گروه دیگر متمایز شده است :

h1,h2,p{
text-align: center;
color: red;
}

در ادامه با ما باشید مطالب جالبی برای شما دوستان عزیز در راه داریم…. در صورت تمایل مطالب ما را به اشتراک بگذارید تا دوستانتان بهره کافی را ببرند……