|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

Pseudo-classes در CSS

  • از Pseudo-classes (شبه كلاس ها) براي تعريف دستورات خاصي از يك عنصر ،‌استفاده مي شود. براي مثال مي توان از Pseudo-classes براي :

    استايل دهي به يك عنصر به هنگام بردن ماوس روي آن
    استايل دهي متفاوت براي لينك هاي بازديد شده و بازديد نشده
    استايل دهي به عنصري كه روي آن تمركز شود ( کلیک شود)

    استفاده مي شود.
     

    تركيب كد Pseudo-classes

    تركيب كد براي Pseudo-classes به شرح زير مي باشد :‌

    ترکیب کد شبه کلاس ها
    selector:pseudo-class {
        property:value;
    }
    مشاهده مثال



    لينك ها را مي توان به روش هاي مختلفي نمايش داد :

    مثال :
    نمایش لینک ها با شبه کلاس ها
     /* لینک مشاهده نشده */
    a:link {
        color: #FF0000;
    }
    
    /* لینک مشاهده شده */
    a:visited {
        color: #00FF00;
    }
    
    /* لینک اشاره شده */
    a:hover {
        color: #FF00FF;
    }
    
    /* لینک انتخاب شده */
    a:active {
        color: #0000FF;
    } 
    مشاهده مثال


    نكته ! a:hover بايد بعد از a:link و a:visited در CSS قرار گيرد تا تاثير داشته باشد.a:active هم براي تاثير داشتن بايد بعد از a:hover قرار گيرد. نام هاي Pseudo-classes به بزرگي و كوچكي حروف حساس نيستند.

     

    شبه كلاس ها و كلاس هاي CSS

    Pseudo-classes را مي توان با كلاس هاي CSS تركيب كرد. براي مثال زماني كه ماوس را بر روي لينك در مثال زير ببريد ،‌رنگ آن تغيير مي كند.

    مثال :
    ترکیب کلاس ها با شبه کلاس ها
    a.highlight:hover {
        color: #ff0000;
    }
    مشاهده مثال

     

    ماوس بر روي <div>

    مثالي براي استفاده از hover: بر روي عنصر <div> :‌

    اشاره بر روی div
    div:hover {
        background-color: blue;
    }
    مشاهده مثال

     

    ابزار راهنماي  ساده

    از Pseudo-classes مي توان براي تعريف ابزار راهنمايي ساده استفاده كرد.در اين روش به هنگام بردن ماوس بر روي <div> مورد نظر ،‌ يك عنصر <p> به عنوان ابزار راهنمايي نمايش داده مي شود.

    مثال :
    ابزار راهنما با استفاده از اشاره
    p {
        display: none;
        background-color: yellow;
        padding: 20px;
    }
    
    div:hover p {
        display: block;
    }
    مشاهده مثال

     

    شبه كلاس :first-child

    first-child: يك عنصر مشخص كه اولين وارث از يك عنصر ديگر باشد را انتخاب مي كند.

    در مثال زير  ،‌ سلكتور هر عنصر <p> را كه اولين وارث از هر عنصر ديگري باشد را انتخاب مي كند.

    مثال :
    شبه کلاس firstchild
    p:first-child {
        color: blue;
    }
    مشاهده مثال

     

    انتخاب اولين عنصر <i> از تمام عناصر <p> اول

    در مثال زير سلكتور ،‌ تمام عناصر <i> موجود در عناصر <p> را كه اولين وارث از والد خود هستند را انتخاب مي كند.

    مثال :
    اولین عنصر داخل عنصر دیگر
    p i:first-child {
        color: blue;
    }
    مشاهده مثال

     

    شبه كلاس lang:

    شبه كلاس lang: امكان تعيين دستورهاي خاص براي زبان هاي مختلف را فراهم مي كند.

    در مثال زير ،‌ lang: ،‌  براي عناصر <q> داراي lang="no" علامت كوتيشن  تعيين مي كند.

    مثال  :
    تمام عناصر مورد نظر داخل اولین عنصر
    p:first-child i {
        color: blue;
    }
    مشاهده مثال


     

نظر شما

>

یادگیری CSS

مقالات و دروس

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

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

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

ورود با کلمه عبور تنظیم مجدد