Pseudo-classes در CSS
یادگیری CSS
                        تعداد بازدید :
                        
                            5759
                        
                    
                    
                        تاریخ و ساعت انتشار :
                        
                            چهار شنبه 1 شهریور 1396   01:55
                        
                    
                - از 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 به بزرگي و كوچكي حروف حساس نيستند.
 
 شبه كلاس ها و كلاس هاي CSSPseudo-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-childfirst-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; }
 
 
 
         
                 ورود به کارتابل مشتریان وب مهراز
                    ورود به کارتابل مشتریان وب مهراز
                 
         
                     
             
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                                 
                     
                     
                     
                     
                     
                    
نظر شما
>