انتخابگر ها (selector) در CSS
انتخابگر (selector) برای انتخاب المان HTML و استایل دهی به آن استفاده می شود.
به عبارت دیگر با کمک انتخابگر، کدهای CSS را به یک المان HTML متصل می کنیم.
انتخابگرها به چند دسته تقسیم می شوند:
- انتخابگرهای ساده
- نام تگ
- id - (#)
- class - (.)
- انتخابگرهای ترکیبی
- انتخابگر نسلی (فاصله)
- انتخابگر فرزند (<)
- انتخابگر برادر کناری (+)
- انتخابگر برادر عمومی (~)
- انتخابگر شبه کلاس
- انتخابگر شبه المان
- انتخابگر ویژگی
نکته: برای اطلاعات بیشتر به آموزش انتخابگر ترکیبی مراجعه کنید.
نکته: برای اطلاعات بیشتر به آموزش شبه کلاس مراجعه کنید.
نکته: برای اطلاعات بیشتر به آموزش شبه المان مراجعه کنید.
نکته: برای اطلاعات بیشتر به آموزش انتخابگر ویژگی مراجعه کنید.
انتخابگر نام تگ در CSS
یکی از روش های انتخاب المان، استفاده از نام تگ است.
برای مثال انتخاب تگ های body و p و h1 وh2 و... .
body {
background-color: #c6c6c6;
text-align: center;
}
h2 {
background-color: black;
color: green;
}
p {
background-color: black;
color: green;
}
a {
text-decoration : none;
background-color: blue;
}نکته: زمانی که از نام تگ (برای مثال تگ p) به عنوان انتخابگر استفاده می شود. تمام تگ ها p موجود در سند، استایل های CSS را می گیرند.
انتخابگر کلاس (class) در CSS
برای نام گذاری المان های HTML می توان از ویژگی class استفاده کرد.
<p class="نام کلاس"></p>
<p class="p1"></p>در واقع با این ویژگی می توان برای هر المان نامی تعیین کرد. و به کمک این نام در CSS و JS این المان ها را صدا زد.
برای فراخوانی یک المان به واسطه class، از نقطه بعلاوه نام کلاس (classname.) استفاده می شود.
.نام کلاس { }
.p1 { }.p-style {
color: blue;
}نتیجه کد بالا یک متن با رنگ آبی خواهد شد.
برای انتخاب المان های HTML به وسیله ویژگی class باید به روش زیر عمل کنید:
- در فایل HTML، به المان مورد نظر ویژگی class می دهیم و نامی دلخواه انتخاب می کنیم.
- در بخش انتخابگر CSS، علامت نقطه را گذاشته و سپس نام class خود را می نویسیم.
- علامت {} (براکت مجعد) را می گذاریم و داخل آن کد های CSS خود را قرار می دهیم.
نکته: اسم class می تواند هر چیزی باشد اما بهتر است آن را تا حد امکان معنی دار انتخاب کنیم.
نکته: نام کلاس را نمی توان با اعداد شروع کرد.
شما می توانید حتی چندین class را به یک المان بدهید.
<h1 class="h1-style h1-class">در نمونه کد بالا، المان h1 دارای دو class است.
نکته: یک المان می تواند به صورت همزمان، چندین class داشته باشد.
انتخابگر آیدی (id) در CSS
برای نام گذاری المان های HTML می توان از ویژگی id هم استفاده کرد.
<p id="نام آیدی"></p>
<p id="p1"></p>در واقع با این ویژگی می توان برای هر المان نامی اختصاصی تعیین کرد و به کمک این نام در CSS و JS این المان ها را صدا زد.
برای فراخوانی یک المان به واسطه id، از # (هش) بعلاوه نام آیدی (idname#) استفاده می شود.
#نام آیدی { }
#p1 { }#h1-id {
color: red;
}نکته: برخلاف class، هر المان، فقط یک id دارد.
نکته: برخلاف class ، نام هر id باید منحصر به فرد باشد.
نکته: نام id را نمی توان با اعداد شروع کرد.
تفاوت id و class در CSS
تفاوت id و class:
- id یکتا است و چند المان نمی توانند از یک id مشخص استفاده کنند.
- اما class یکتا نیست و حتی چندین المان می توانند از یک class استفاده کنند.
- علامت class (.) است.
- علامت id (#) است.
انتخابگر سراسری (*) در CSS
با انتخابگر سراسری (*) می توانیم یک استایل را در همه ی المان ها اعمال کنیم.
* {
text-align: center;
color: green;
background-color: black;
}انتخابگر های گروهی (,) در CSS
به کمک انتخابگر گروهی یا کاما (,) می توان همزمان، یک ویژگی را در چند المان اعمال کرد. به نمونه کد زیر توجه کنید:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}همه ی المان های بالا ویژگی های css یکسان دریافت می کنند. با کمک انتخابگر گروهی، کد بالا را به این صورت می نویسیم:
h1, h2, p {
text-align: center;
color: red;
}برای استفاده از انتخابگر گروهی، هر انتخابگر را با کاما (,) جدا کنید.
h1, h2, p {
text-align: center;
color: red;
}نکته: با کمک انتخابگر گروهی، از تکرار شدن استایل های یکسان، جلوگیری و حجم کد، کاهش می یابد.
خلاصه درس
- در این درس با دو انتخابگر class و id در CSS آشنا شدیم.
- همچنین متوجه شدیم، انتخابگر ها عناصر HTML را انتخاب می کنند.
تمرین
در مثال زیر رنگ قرمز را به المان p بدهید.
اسم class برابر با p-style باشد.
<style>
{
}
</style>
</head>
<body>
<p class=" "></p>
</body>
احسان اسلامی
