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

  • 15 بازدید
  • شبه کلاس ها در css

    شبه کلاس در css کلمه کلیدی است که به یک selector اضافه می شود و یک حالت خاص از عنصر یا عنصر های انتخاب شده را مشخص می کند. برای مثال، hover: برای تغییر رنگ یک دکمه زمانی که موس روی آن می رود (به اصطلاح hover می شود) می تواند استفاده شود.

    button:hover {

      background-color: #F89B4D;

    }

    شبه کلاس ها را براساس کاربرد و کارایی که دارند می توان به دسته های مختلفی تقسیم کرد. مرتبط با لینک، مرتبط با فرم و ... آنها در موقعیت های مختلف بسیار مفید هستند. برخی از آنها مربوط به CSS3 و برخی مربوط به CSS2 می باشند، بستگی دارد کدام مورد را استفاده کنید.

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

    معرفی برخی شبه کلاس ها

    link تمامی لینک هایی (تگ a) که در صفحه هستند و همچنین ویژگی href دارند. این سلکتور، تمامی لینک های فعال را می گیرد و مانند [a[href عمل میکند اما به مراتب کاربردی تر از آن است.

    visited: لینک هایی را انتخاب می کند که بوسیله مرورگر جاری مشاهده شده است.

    a:link:visited{

    color: orange;

    }

    همچنین می توانید شبه کلاس ها را بصورت ترکیبی با یکدیگر استفاده کنید، برای مثال کد بالا لینک های فعالی که قبلا توسط مرورگر جاری بر روی آن ها کلیک شده باشد را نارنجی می کند.

    موارد دیگری هم هستند که عموما برای لینک ها استفاده می شوند اما برای موارد دیگر مانند فرم ها و ... نیز استفاده می شوند، مانند سلکتور hover: که در ابتدا کاربرد آن توضیح داده شد یا سلکتور active: لینک یا دکمه هایی را انتخاب می کند که با موس بر روی آن کلیک و فشار داده شده و یا به نحوی دیگر فعال شده باشد.

    disabled: فیلد هایی را انتخاب می کند که ویژگی disabled را داشته باشند. بیشتر مرورگر ها فیلد های غیرفعال یا disabled را بصورت خاکستری کم رنگ نمایش می دهند که با استفاده از این سلکتور می توانید این حالت را کنترل کنید.

    ارسال دیدگاه

    نشانی ایمیل شما منتشر نخواهد شد.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.