در css انواع گوناگونی از سلکتور ها یا انتخاب گر ها وجود دارد که به شما امکان انتخاب بخش های مختلف یک فایل html را می دهد. این کار نوعی صدا زدن محسوب می شود. یعنی شما برای یک المان در فایل css یکسری ویژگی ها را مشخص می کنید. مثلا اینکه اگر متن است، رنگش چگونه باشد. چه فونتی داشته باشد. اندازه قلم این متن چه میزان باشد و .. یا در مثالی دیگر، اگر در باره ی یک عکس، ویژگی هایی را مشخص می کنید، این ویژگی ها میتواند اندازه ی عکس در صفحه ی وب یا موقعیت این عکس باشد. سپس در صفحه ی وب، به کمک سلکتور ها این مشخصات را به آن المان ها اعمال می کنیم.
اگر میخواید به css مسلط شوید پیشنهاد میکنیم دوره آموزش css رو در سایت آموزش تک مشاهده کنید
انواع سلکتور ها در css :
- Element Selector
- Class selector
- Id selector
در ادامه به توضیح هریک از این موارد خواهیم پرداخت.
1-Element Selector
این انتخاب گر، یکی از سلکتور های رایج در برنامه نویسی به زبان Css است. element ها در واقع همان تگ های html هستند. برای نوشتن این انتخاب گر باید از یک elemet Selector با یک نام مشخص استفاده کرد. مثلا تگp که برای ایجاد یک پاراگراف در زبان html استفاده می شود، می تواند در زبان css به عنوان یک سلکتور نوشته شود. یا مثلا تگ body نیز به همین شکل یک element selector حساب می شود.
وقتی از این نوع انتخابگر استفاده کنیم، به طبع این موارد در تمامی تگ های html یک صفحه ی وب اعمال می شود. مثال:
P { color: blue;
Font-family:Arial; }
Body { color-background: red;
Font-size:12px; }
در مثال بالا در سلکتور p رنگ و نوع فونت تگ های یک صفحه ی html را تعریف کردیم. در سلکتور بعدی برای تگ body رنگ پس زمینه و اندازه ی فونت را مشخص کردیم.
1-
این انتخاب گر ها یکی از ویژگی ها یا خصوصیات عمومی در یک صفحه ی وب هستند؛ که در یک صفحه ی html می توانند بطور عمومی مورد استفاده قرار گیرند. یعنی این انتخاب گر ها فقط مخصوص یک مورد از یک تگ یا یک خط کد نیستند. همچنین برعکس مورد قبل می توانیم نام دلخواهی برای آنها تعیین کنیم . در ضمن قبل از نام این سلکتور ها باید یک نقطه (.) قرار دهید.
نکته : در نام گذاری سلکتور ها در css باید به نکات زیر توجه داشت:
1. از علائمی مانند @,$,%,!,& و .. نمی شود استفاده کرد.
2. هر نامی که برای یک سلکتور انتخاب کردید، در زمان استفاده نیز باید به همان شکل آن را بنویسید. زیرا css به حروف کوچک و بزرگ حساس است.
مثالی در مورد Class selector ها :
.example1 {
background-color:red;
color:#000;
}
2-Id Selector
این نوع از انتخاب گرها که بسیار مورد استفاده برنامه نویسان هستند، یکی دیگر از سلکتور های عمومی در زبان html هستند. تفاوت این انتخاب گر با class selector ها در این است که، این انتخاب گر ها فقط می توانند به یک المان اختصاص داده شوند. برای تعریف این دسته از سلکتور ها در یک فایل css باید قبل از نام دلخواهی که، انتخاب می کنیم یک هشتگ (#) قرار دهیم. مثال:
#newId {
background:darkblue;
color:white;
{
در فایل css کد های بالا را برای یک آیدی جدید بنام newId می نویسیم .
<body>
<p id="newId">...</p>
</body>
در این کد که در فایل html نوشته می شود، آیدی سلکتور تعریف شده را به تگ p نسبت می دهیم. و بعد از بسته شدن این تگ، سلکتور newId هم بسته خواهد شد.
