CSS Selector هایی که ممکن است درباره‌ی آن‌ها چیزی ندانید! (قسمت دوم)

- visibility ۰ mode_comment

به نام خدا

css-selectors

در قسمت قبلی در مورد برخی از CSS Selector ها و نحوه‌ی کار آنها صحبت کردیم. در این قسمت در مورد CSS Selector های بیشتری صحبت میکنیم.

شبه کلاس :focus

از شبه کلاس :focus میتونید بیشتر برای رویداد فوکاس input ها و textarea ها استفاده کنید.

شبه کلاس :disabled و :enabled

از این دو شبه کلاس نیز بیشتر برای عناصر فرم مانند inputها، textaea، checkbox، radio و button استفاده میکنند. از شبه کلاس :enabled برای عناصر فعال و از شبه کلاس :disabled برای عناصر غیر فعال استفاده میکنند.

شبه کلاس :checled

با استفاده از این شبه کلاس میتوان استایل های زیبایی برای ckeckbox ها  نوشت. برای اطلاعات بیشتر میتونید به این مطلب مراجعه کنید.

شبه کلاس :valid و :invalid

همانطور که میدونید در HTML5 امکان معتبر سازی input ها قرار گرفت. اگر داده های ورودی معتبر بودند شبه کلاس :valid و اگر معتبر نبودن شبه کلاس :invalid بر روی عنصر عمل میکند.

شبه کلاس :required و :optional

در HTML5 یکی از امکانات جدیدی که اضافه شد، خاصیت required برای input ها بود که پر کردن اون‌هارو اجباری میکرد. شبه کلاس :required بر عناصری که دارای خاصیت required باشند اشاره میکند و شبه کلاس :optional بر عناصری اشاره میکند که دارای خاصیت required نباشند.

شبه کلاس :out-of-range و :in-range

در HTML5 خاصیت های کنترلی جدیدی به عناصر فرم اضافه شد که یکی از آنها خاصیت min و max بود که حداقل و حداکثر مقدار رو مشخص میکرد. اگر مقدار وارد شده بین این دو بود شبه کلاس :in-range، و اگر مقدار وارد شده بین این دو نبود شبه کلاس :out-of-range بر روی عنصر اعمال میشود.

شبه کلاس :nth-of-type

اگر قسمت قبلی این آموزش رو دنبال کرده باشید، در اون قسمت در مورد شبه کلاس :nth-child صحبت کردیم؛ شبه کلاس :nth-of-type هم به همون صورت عمل میکنه و تنها تفاوتش این هست که عناصر هم type خودش رو انتخاب میکنه. گاهی اوقات در یک والد عناصر مختلفی وجود دارد که در این مواقع استفاده از :nth-child ما را به نتیجه ی دلخواه نمیرساند و در این مواقع بهتر است از :nth-of-type استفاده کنیم.

  • :first-of-type - p:first-of-type : انتخاب اولین عنصر p که اولین عنصر p در والد خود باشد.
  • :last-of-typep:last-of-type : انتخال آخرین عنصر p که آخرین عنصر p در والد خود باشد.
  • p:nth-of-type(even) / p:nth-of-type(odd)  : انتخاب عنصر های p فرد یا زوج در یک والد.
  • :last-of-type(n) - p:last-of-type(2) : انتخاب دومین عنصر p از آخر.

شبه عنصر ::selection

شما میتوانید با استفاده از شبه عنصر ::selection رنگ متن و بکگراند متون انتخاب(select) شده  را مشخص کنید.

سخن آخر

همونطور که دیدید CSS3 و HTML5 سلکتورهای کاربردی و جدیدی رو به این زبان(CSS) اضافه کردند که در برخی موارد نیاز مارا به زبان javascript رفع کرده است. میتونید لیست تمامی سلکتورهای CSS رو در W3Schools ببینید.

موفق باشید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.