انتخابگرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted

انتخابگر (به انگلیسی: selectorخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted)های CSS برای یافتن (یا انتخاب) عناصر HTML مورد نظر برای طراحی استفاده می‌شود.[۱]

می‌توانیم انتخاب گرها را در CSS را به پنج دسته تقسیم کنیم:

  • انتخابگرهای ساده (عناصر را بر اساس نام، شناسه، کلاس انتخاب می‌کنند)
  • انتخابگرهای ترکیبی (عناصر را بر اساس یک رابطه خاص بین آنها انتخاب می‌کند)
  • انتخابگرهای شبه کلاس (به انگلیسی: pseudo-classخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted) (عناصر را بر اساس یک وضعیت خاص انتخاب می‌کند)
  • انتخابگرهای شبه عناصر (بخشی از یک عنصر را انتخاب و استایل‌دهی می‌کند)
  • انتخابگرهای خاصیت (عناصر را بر اساس یک خاصیت یا مقدار خاصیت انتخاب می‌کند)

در این صفحه اکثر انتخابگرهای مهم و اصلی CSS توضیح داده خواهد شد.

انتخابگر عنصر (به انگلیسی: elementخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted) در CSS

انتخابگر عنصر، عناصر HTML ای را بر اساس نام عنصر انتخاب می‌کند.

مثال

در این مثال، تمامی عناصر <p> در صفحه به صورت وسط چین و با رنگ قرمز قرار خواهند گرفت:

1 p {
2   text-align: center;
3   color: red;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


انتخابگر شناسه (به انگلیسی: idخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted) در CSS

انتخابگر شناسه از ویژگی شناسه عنصر HTML، برای انتخاب آن عنصر استفاده می‌کند.

شناسه یک عنصر در صفحه منحصر به فرد است، بنابراین انتخابگر شناسه، برای انتخاب یک عنصر منحصر به فرد استفاده می‌شود!

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

مثال

دستور CSS زیر بر عنصر HTML ای با شناسه برابر با id="para1" اعمال خواهد شد:

1 #para1 {
2   text-align: center;
3   color: red;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


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

انتخابگر کلاس (به انگلیسی: classخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted) در CSS

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

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

مثال

در این مثال تمامی عناصر HTML با class="center" قرمز رنگ و وسط‌چین خواهند شد:

1 .center {
2   text-align: center;
3   color: red;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


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

مثال

در این مثال تنها عناصر <p> با class="center" وسط چین خواهند شد:

1 p.center {
2   text-align: center;
3   color: red;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


همچنین عناصر HTML می‌توانند با بیش از یک کلاس مرتبط باشند.

مثال

در این مثال عنصر <p> با توجه به class="center" و class="large" استایل‌دهی خواهد شد:

<p class="center large">This paragraph refers to two classes.</p>
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


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

انتخابگر کلی در CSS

انتخابگر کلی (به انگلیسی: Universalخطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted) * تمامی عناصر موجود در صفحه را انتخاب می‌کند:

مثال

دستور CSS زیر بر روی تمامی عناصر HTML موجود در صفحه تأثیر می‌گذارد:

1 * {
2   text-align: center;
3   color: blue;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


انتخابگر گروهی در CSS

انتخابگر گروهی تمامی عناصر HTML با تعریف استایل یکسان را انتخاب می‌کند.

به کد CSS زیر توجه کنید (عناصر h2 ،h1 و p تعریف استایل یکسانی دارند):

 1 h1 {
 2   text-align: center;
 3   color: red;
 4 }
 5 
 6 h2 {
 7   text-align: center;
 8   color: red;
 9 }
10 
11 p {
12   text-align: center;
13   color: red;
14 }


بهتر است برای کوتاه‌تر شدن کد، انتخابگرها را گروه‌بندی کرد.

برای گروه‌بندی انتخابگرها، هر انتخابگر را به وسیله یک , از یک‌دیگر جدا کنید.

مثال

در این مثال ما انتخابگرهای کد بالا را گروه‌بندی کردیم :

1 h1, h2, p {
2   text-align: center;
3   color: red;
4 }
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted
خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


خود را با تمرینها امتحان کنید!

تمامی انتخابگرهای ساده CSS

انتخابگر مثال توضیح مثال
.class .intro همه عناصر HTML ای که کلاس آنها برابر با class="intro" است را انتخاب می‌کند
#id #firstname همه عناصر HTML ای که شناسه (id) آنها برابر با id="firstname" است را انتخاب می‌کند
* * همه عناصر را انتخاب می‌کند
انتخابگر عنصر (element) div, p تمامی عناصر div و عناصر p را انتخاب می‌کند

خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted

خطای لوا: روند نتوانست ایجاد شود: proc_open(/dev/null): failed to open stream: Operation not permitted


منابع آموزشی