www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫معرفی Selector های CSS - قسمت 4


نویسنده: میثم خوشبخت
تاریخ: ۱۳۹۳/۱۱/۳۰ ۱۹:۴۰
آدرس: www.dntips.ir
31- :disabled
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی disabled می‌باشند.
<style>
    :disabled {
        background: yellow;
    }
</style>
<input disabled="disabled"/>
<input/>
<input disabled="disabled"/>
<input />
در مثال فوق input اول و سوم به رنگ زرد نمایش می‌یابند.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 3.2  9.6  9.0 3.5  4.0 :disabled  3

32- :enabled
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی disabled می‌باشند. در حال حاضر در اکثر مرورگرها فقط برای تگ input و textarea عمل می‌کند.  
<style>
    :enabled {
        background: yellow;
    }
</style>
<input disabled="disabled" />
<input />
<input disabled="disabled" />
<input />
در مثال فوق input دوم و چهارم به رنگ زرد نمایش می‌یابند.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 3.2  9.6  9.0 3.5  4.0 :enabled  3

33- :read-only
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی readonly می‌باشند. در برخی مرورگرها ممکن است تگ body و سایر تگ‌هایی را که محتوای آنها غیر قابل ویرایش می‌باشد نیز انتخاب نماید.
<style>
    :read-only {
        background: yellow;
    }
</style>
<input readonly="readonly" />
<input />
<input readonly="readonly" />
<input />
در مثال فوق input اول و سوم به رنگ زرد نمایش می‌یابند. در برخی مرورگرها نیز ممکن است پس زمینه‌ی صفحه نیز به رنگ زرد نمایش یابد.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 Yes   Yes   No -moz-  Yes :read-only  3 

34- :read-write
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی readonly می‌باشند و یا محتوای آنها قابل ویرایش است.
<style>
    :read-write {
        background: yellow;
    }
</style>
<input readonly="readonly" />
<input />
<input readonly="readonly" />
<input />
در مثال فوق input دوم و چهارم به رنگ زرد نمایش می‌یابند.  
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 Yes   Yes   No -moz-  Yes :read-write  3 

35- :valid
تگ‌های input ایی را انتخاب می‌نماید که مقدار ورودی آنها با توجه به ویژگی‌های type و pattern معتبر باشند.
مثال مربوط به این بخش در Selector بعدی، یعنی :invalid ذکر شده است.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.0   10.0   10.0 4.0  10.0 :valid  3 

36- :invalid
تگ‌های input ی را انتخاب می‌نماید که مقدار ورودی آنها با توجه به ویژگی‌های type و pattern نامعتبر باشند.  
<style>
    :valid {
        border: 3px solid green;
    }
    :invalid {
        border: 3px solid red;
    }
</style>
<input type="number" />
<input type="text" pattern="^[a-z]{2,10}$"/>
<input type="email" />
در مثال فوق، در ابتدا، کادر دور تگ‌های input با توجه به Selector ی با عنوان :valid، به رنگ سبز نمایش می‌یابند. با ورود اطلاعات، در صورتی که مقدار ورودی نامعتبر باشد، کادر به رنگ قرمز تغییر می‌یابد. به عنوان مثال با ورود حرف در input اول، با ورود عدد در input دوم و با ورود یک متن تا قبل از ورود @ و دامین، کادر به رنگ قرمز نمایش می‌یابد.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.0   10.0   10.0 4.0  10.0 :invalid  3 

37- :required
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی required می‌باشند.  
<style>
    :required {
        background: yellow;
    }
</style>
<input required="required" />
<input />
<input required="required" />
<input />
در مثال فوق input اول و سوم به رنگ زرد نمایش می‌یابند. 
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.0   10.0   10.0 4.0  10.0 :required  3 

38- :optional
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی required می‌باشند. 
<style>
    :optional {
        background: yellow;
    }
</style>
<input required="required" />
<input />
<input required="required" />
<input />
در مثال فوق input دوم و چهارم به رنگ زرد نمایش می‌یابند.  
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.0   10.0   10.0 4.0  10.0 :optional  3 

39- :in-range
برای تگ‌های input ی استفاده می‌شود که ویژگی min و max دارند. تگ هایی را انتخاب می‌نماید که مقدار ورودی آنها در بازه‌ی min و max باشند.
مثال مربوط به این بخش در Selector بعدی، یعنی :out-of-range ذکر شده است.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.2   11.0   No 28.0  10.0 :in-range  3

40- :out-of-range
برای تگ‌های input ی استفاده می‌شود که ویژگی min و max دارند. تگ‌هایی را انتخاب می‌نماید که مقدار ورودی آنها خارج از بازه‌ی min و max باشد. 
<style>
    :in-range {
        border: 3px solid green;
    }

    :out-of-range {
        border: 3px solid red;
    }
</style>
<input type="number" min="10" max="50" />
در مثال فوق با ورود عددی خارج از محدوده‌ی 10 تا 50، کادر دور تگ به رنگ قرمز نمایش می‌یابد، در غیر اینصورت به رنگ سبز نمایش می‌یابد.
پشتیبانی در مرورگرها:

 Selector نسخه CSS
 5.2   11.0   No 28.0  10.0 :out-of-range  3 
مطالب مشابه