CSS 选择器

CSS 选择器

CSS انتخاب گرار

ہم CSS انتخاب گرار کو پانچ زمروں میں تقسیم کرسکتے ہیں:

یہ صفحاً بہترین CSS انتخاب گرار کو درس دے گا۔

انتخاب‌گر عناصر CSS

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

مثال

در اینجا، تمام عناصر <p> موجود در صفحه در وسط قرار می‌گیرند و دارای رنگ نوشتار قرمز هستند:

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

خودتان امتحان کنید

انتخاب‌کننده id CSS

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

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

برای انتخاب عنصری که دارای id خاصی هستند، یک علامت ضربدر (#) بنویسید، سپس id آن عنصر.

مثال

این قوانین CSS بر روی عنصر HTML با id="para1" اعمال می‌شود:

#para1 {
  text-align: center;
  color: red;
}

خودتان امتحان کنید

توجه داشته باشید:نام id نمی‌تواند با عدد شروع شود.

انتخاب‌کننده کلاس CSS

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

برای انتخاب عناصری که دارای class خاصی هستند، یک علامت نقطه (.) بنویسید، سپس نام کلاس.

مثال

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

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

خودتان امتحان کنید

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

مثال

در این مثال، تنها عناصر <p> با class="center" در وسط قرار می‌گیرند:

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

خودتان امتحان کنید

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

مثال

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

<p class="center large">این پاراگراف دو کلاس را دارد.</p>

خودتان امتحان کنید

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

انتخاب‌کننده عمومی CSS

انتخاب‌کننده عمومی (*). تمام عناصر HTML موجود در صفحه را انتخاب می‌کند.

مثال

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

* {
  text-align: center;
  color: blue;
}

خودتان امتحان کنید

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

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

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

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;
}

خودتان امتحان کنید

تمام انتخاب‌کنندگان CSS ساده

انتخاب‌کننده مثال توضیح مثال
.class .intro تمام عناصر class="intro" را انتخاب کنید.
#id #firstname عنصر با id="firstname" را انتخاب کنید.
* * تمام عناصر را انتخاب کنید.
عنصر p تمام عناصر <p> را انتخاب کنید.
عنصر,عنصر,.. div, p تمام عناصر <div> و تمام عناصر <p> را انتخاب کنید.

خواندن بیشتر

کتاب خارجی:انتخاب‌گر عناصر CSS

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

کتاب خارجی:تفصیلات انتخاب‌گر کلاس CSS

کتاب خارجی:تفصیلات انتخاب‌گر ID CSS

کتاب خارجی:تفصیلات انتخاب‌گر ویژگی CSS

کتاب خارجی:انتخاب‌گر فرزند CSS

کتاب خارجی:انتخاب‌گر فرزند CSS

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