021-20483015

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

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

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

مقالات مرتبط