دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۳۰
  • مهر

جلسه ۲۶ : شبه کلاس ها در CSS

  • دسته‌بندی‌ها :
جلسه ۲۶ : شبه کلاس ها در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در طراحی یک وب سایت در مواردی به احتمال زیاد نیاز خواهید داشت که برای رویدادهای مهم یک عنصر در CSS یک Style خاص را تعریف کنید، به عنوان مثال در مواردی نیاز دارید که با حرکت اشاره گر ماوس روی یک عنصر رنگ پس زمینه یا فونت و… تغییر کند. برای چنین کارهایی Pseudo-classes ( شبه کلاس ها در CSS ) ارائه شده است. با استفاده از قابلیت های Pseudo-classes در CSS برای تعریف Style برای رویدادهای مهم عناصر بسیار ساده است. برای آشنایی بیشتر با چگونگی کار با شبه کلاس ها در CSS در ادامه این بخش با ما همراه باشید.

      شبه کلاس ها در CSS

      در این آموزش ما شما را با طرز استفاده از Pseudo-classes در CSS و انواع آن آشنا می کنیم.

      Pseudo-classes در CSS چیست

      شبه کلاس ها در CSS برای تعریف style در رویدادها و وضعیت های مختلف عناصر استفاده می شود.

      به عنوان مثال Pseudo-classes در CSS می تواند برای موارد زیر استفاده شود:

      • زمانیکه کاربر ماوس را روی یک عنصر می برد Style آن را تغییر دهید.
      • زمانیکه کاربر یک لینک را بازدید می کند، Style آن را تغییر دهید.
      • زمانیکه یک عنصر مانند فیلد text در حالت انتخاب است برای آن Style تعریف کنید.
      شبه کلاس ها در CSS

      شبه کلاس ها در CSS


      ساختار

      ساختار استفاده از pseudo-classes در CSS :

      مثال : 

      نمونه هایی از شبه کلاس ها در CSS

      شبه کلاس هایی زیر دسترسی وضعیت های مختلف لینک در CSS را نشان می دهد:

      مثال : شبه کلاس ها
      خودتان امتحان کنید »

      نکته : شبه کلاس a:hover حتما باید بعد از شبه کلاس های a:link وa:visited در CSS تعریف شود.

      شبه کلاس a:active برای موثر بودن حتما باید بعد از a:hover تعریف شود.

      Pseudo-classes و CSS classes

      Pseudo-classes را می توان با  CSS classes ترکیب کرد.

      در مثال زیر با حرکت اشاره گر ماوس روی عنصر ، رنگ عنصر تغییر می کند:

      مثال : شبه کلاس hover
      خودتان امتحان کنید »

      اعمال Hover روی عنصر div

      مثال زیر طرز استفاده از شبه کلاس :hover را در عنصر div نشان می دهد:

      مثال : شبه کلاس hover نمونه ی دوم
      خودتان امتحان کنید »

      یک Tooltip Hover ساده

      در مثال زیر با حرکت ماوس روی <div> یک عنصر <p> ظاهر می شود:

      pseudo-classes در CSS -p -حالت hover

      pseudo-classes در CSS -p -حالت hover


      مثال : ایجاد tooltip
      خودتان امتحان کنید »

      شبه کلاس first-child

      شبه کلاس :first-child اگر چند عنصر هم نام مثلا چند عنصر <p> در یک عنصر والد باشد، اولین عنصر فرزند را انتخاب می کند.

      مثال -۱: تعریف style برای اولین عنصر <p>

      در مثال زیر رنگ قلم اولین عنصر <p> فرزند به رنگ آبی در می آید:

      مثال : شبه کلاس first-child
      خودتان امتحان کنید »

      مثال-۲: تعریف style برای اولین عنصر <i> در تمام عنصر <p>

      مثال زیر رنگ قلم اولین عنصر <i> در تمام عناصر <p> را آبی می کند:

      مثال : فرزند فرزند
      خودتان امتحان کنید »

      مثال-۳ : تعریف style برای تمام عناصر <i> در اولین عنصر فرزند <p>

      مثال زیر تمامی عناصر <i> داخل اولین عنصر فرزند <p> را style می دهد:

      مثال : تعریف style برای تمام فرزندان p که i هستند
      خودتان امتحان کنید »

      شبه کلاس lang

      شبه کلاس lang به شما اجازه می دهد تا برای زبان های خاصی در یک عنصر Style تعریف کنید.

      مثال زیر یک عبارت را بین دو کاراکتر “~” قرار می دهد:

      مثال : شبه کلاس :lang
      خودتان امتحان کنید »

      لیست تمام شبه کلاس های CSS

      انتخابگرمثالتوضیحات مثال
      :activea:activeلینک فعال را انتخاب می کند.
      :checkedinput:checkedهر عنصر <input> چک شده را انتخاب می کند.
      :disabledinput:disabledهر عنصر <input> غیرفعال را انتخاب می کند.
      :emptyp:emptyهر عنصر <p> که فرزندی ندارد را انتخاب می کند.
      :enabledinput:enabledهر عنصر <input> فعال را انتخاب می کند.
      :first-childp:first-childهر عنصر <p> که اولین فرزند عنصر والد خود است را انتخاب می کند.
      :first-of-typep:first-of-typeهر عنصر <p> که اولین عنصر <p> عنصر والد خود است را انتخاب می کند.
      :focusinput:focusعنصر <input> که آماده ویرایش است،را انتخاب می کند.
      :hovera:hoverعناصر زیر اشاره گر ماوس را انتخاب می کند.
      :in-rangeinput:in-rangeعناصر <input> را با یک مقدار در محدوده مشخصی انتخاب می کند.
      :invalidinput:invalidتمام عناصر <input> با مقدار نامعتبر را انتخاب می کند.
      :lang(language)p:lang(it)برای یک عبارت خاص کاراکترهایی را اضافه می کند.
      :last-childp:last-childهر عنصر <p> که آخرین فرزند عنصر والد خود است را انتخاب می کند.
      :last-of-typep:last-of-typeهر عنصر <p> که آخرین عنصر <p> عنصر والد خود است را انتخاب می کند.
      :linka:linkتمام لینک های بدون بازدید را انتخاب می کند.
      :not(selector):(not(pهر عنصری را انتخاب می کند که عنصر <p> نیست.
      :nth-child(n)(p:nth-child(2هر عنصر <p> که فرزند دوم والد آن است را انتخاب می کند.
      :nth-last-child(n)(p:nth-last-child(2هر عنصر <p> که فرزند دوم عنصر والد خود است را شمارش می کند که از آخرین فرزند انتخاب شده است.
      :nth-last-of-type(n)(p:nth-last-of-type(2هر عنصر <p> را انتخاب می کند که عنصر <p> دوم از پدر و مادرش است، شمارش از آخرین فرزند است.
      :nth-of-type(n)(p:nth-of-type(2هر عنصر <p> که عنصر <p> دوم از عنصر والدش است را انتخاب می کند.
      :only-of-typep:only-of-typeهر عنصر <p> که تنها عنصر <p> والدش است را انتخاب می کند.
      :only-childp:only-childهر عنصر <p> را انتخاب می کند که تنها فرزند عنصر والدش است.
      :optionalinput:optionalعناصر <input> را بدون هیچ ویژگی «مورد نیاز» انتخاب می کند.
      :out-of-rangeinput:out-of-rangeعناصر <input> را با مقدار خارج از محدوده مشخصی انتخاب می کند.
      :read-onlyinput:read-onlyعناصر <input> با یک ویژگی readonly مشخص شده را انتخاب می کند.
      :read-writeinput:read-writeعناصر <input> را که بدون هیچ ویژگی readonly است را انتخاب می کند.
      :requiredinput:requiredعناصر <input> را با یک ویژگی “مورد نیاز” مشخص می کند.
      :rootrootعنصر ریشه سند را انتخاب می کند.
      :target#news:targetعنصر فعلی #news فعال را انتخاب می کند.
      :validinput:validتمام عناصر <input> با یک مقدار معتبر را انتخاب می کند.
      :visiteda:visitedتمام لینک های بازدید شده را انتخاب می کند.

      تمام عناصر شبه کلاس در CSS

      انتخابگرمثالتوضیح مثال
      ::afterp::afterمحتوای را بعد از هر عنصر <p> وارد می کند.
      ::beforep::beforeمحتوایی را قبل از هر عنصر <p> اضافه می کند.
      ::first-letterp::first-letterاولین حرف از هر عنصر <p> را انتخاب می کند.
      ::first-linep::first-lineخط اول هر عنصر <p> را انتخاب می کند.
      ::selectionp::selectionبخشی از یک عنصر را انتخاب می کند که توسط یک کاربر انتخاب می کند.

      کلام آخر

      شبه کلاس ها در CSS به شما کمک می کنند تا هم برای رویدادهای مختلف نظیر جرکت ماوس روی عناصر style تعریف کنید و هم به عناصر مرتبط در سند دسترسی داشته باشید.

      QR:  جلسه ۲۶ : شبه کلاس ها در CSS
      به اشتراک بگذارید