• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 2029 ۲۴ آبان ۹۳

به نام خدا

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 ببینید.

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram