انتخاب کننده ها یک مبحث مهم در css است که کمتر به آن پرداخته می شود. اگر بتوان انتخاب های دقیقی داشت، شاید بتوان از نوشتن idها یا classهای اضافی خودداری کرد.

همه ی انتخاب کننده ها به یک عنصر خاص در صفحه اشاره دارند و در ادامه به راه های مختلف ایجاد انتخاب کننده ها می پردازیم.

انتخاب از روی نام تگ

اولین راه و ساده ترین راه انتخاب عناصر استفاده از نام آن هاست:

اما زمانی ازاین راه استفاده می شود که بخواهیم تمام عناصر مربوطه را مورد اعمال تنظیم هایمان قرار دهیم پس زیاد مورد استفاده قرار نمی گیرد. به مثال زیر دقت کنید:

این کد اندازه فونت تمام عناصر h1 صفحه را برابر 14پیکسل قرار می دهد.

استفاده از چند انتخاب کننده با یکدیگر

اگر بخواهیم چندین انتخاب کننده را با یکدیگر ترکیب کنیم تا یک کد بر روی چند انتخاب کننده اعمال شود و نیازی به نوشتن دوباره کد نباشد، تنها لازم است تا انتخاب کننده ها را با کاراکتر , از یکدیگر جدا کنیم:

به سادگی کار پی بردید؟

مثال زیر نیازی به توضیح ندارد و کاملا واضح است:

انتخاب براساس id یا class

با ویژگی id و class پیش از این آشنا شدید. حال موقع استفاده از آن ها است. آی دی و کلاس ها به ترتیب با کاراکتر # و . پیش از نام id یا class شناخته می شوند. شکل کلی انتخاب براساس id یا class در زیر نشان داده می شود:

id:

class:

در زیر مثالی از یک عنصر با id یا class، myText را می بینید:

یا

 

لیستی از انتخاب کننده های پیشرفته در css

انتخاب کننده توضیحات
* تمام عناصر صفحه را انتخاب می کند.
A تمام عناصری که نام تگ آنها A باشد را انتخاب می کند.
A B تمام عناصر B را که جزء فرزندان A باشد را انتخاب می کند.
A>B عناصری که نام تگ آنها B باشد و از فرزندان مستقیم A به شمار رود را انتخاب می کند.
A+B عناصری که نام تگ آنها B باشد و بلافاصله گره بعد از A در همان سطح باشند را انتخاب می کند.
A~B عناصری که نام تگ آنها B باشد و گره ی بعد از A در همان سطح باشند.
A.B تمام عناصر A که دارای کلاس B باشند را انتخاب می کند.
A#B تمام عناصر A را که دارای آی دی id، B باشند را انتخاب می کند.
A[c] تمام عناصری که نام تگ آن ها A باشد و دارای صفت c باشند را انتخاب می کند.
A[c=d] تمام عناصری که نام تگ آنها A باشد و مقدار صفت c از آنها برابر d باشد را انتخاب می کند.
A[c^=d] عناصری که نام تگ آنها A باشد و دارای صفت c باشد و مقدار صفت c آنها با مقدار d شروع شود را انتخاب می کند.
A[c$=d] عناصری که نام تگ آنها A باشد و دارای صفت c باشد و مقدار صفت c آنها با مقدار d پایان پذیرد را انتخاب می کند.
A[c!=d] تمام عناصری که نام تگ آنها A باشد و مقدار صفت c از آنها برابر d نباشد را انتخاب می کند.
A[c*=d] عناصری که نام تگ آنها A باشد و دارای صفت c باشد و مقدار صفت c آنها مقدار d یافت شود.
:checked عناصری از checkboxها یا دکمه های رادیویی را انتخاب می کند که در حالت انتخاب باشد.
:disabled همه ی عناصری که در حالت disabled یا غیرفعال باشد را انتخاب می کند.
:enabled همه ی عناصری که در حالت enabled یا فعال شده باشند، را انتخاب می کند.
:not(A) انتخاب کننده را برعکس می کند.

 

انتخاب کننده های :checked ، :disabled و :enabled را می توان مانند دیگر انتخاب کننده ها ترکیب کرد:

این کد رنگ لینک های فعال صفحه را تعیین می کند.

یا مثال زیر checkboxهای تیک خورده صفحه را انتخاب می کند و عرض آنها را مشخص می کند: