:ভিজিবল সিলেক্টর (:visible Selector)

এটি document এর দৃশ্যমান(visible) element কে select করবে। ইহা hidden selector এর ঠিক বিপরীত। যদি কোন element document এ জায়গা দখল করে তবে সেটি vilible হিসেবে বিবেচ্য হবে। vilible element এর height অথবা width অবশ্যই 0(zero) থেকে বড় হবে।

[বি:দ্র: যদি কোন element এর visibility :hidden অথবা opacity :0 থাকে তবে ঐ element টি যতক্ষন পর্যন্ত layout এ space ধরে রাখরে, ততক্ষন পর্যন্ত সেটি hidden হিসেবে বিবেচ্য হবেনা। যেমন, কোন animation এর সময়, যতক্ষন পর্যন্ত animation টি শেষ না হবে ততক্ষণ পর্যন্ত element টি visible হিসেবে বিবেচ্য হবে।
এই note টি hidden selector -এ ও দেয়া হয়েছে। :visibility এর কাজ বুঝতে সমস্যা হলে পূর্বের hidden selecto টি দেখুন ।]

উদাহরন Code :

নিম্নের উদাহরন টি সকল visible paragraph কে highlight করবে।

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p:visible").css("background-color","red");
});
</script>
</head>
<body>
    <h1>Welcome to www.tutorialbd.com</h1>
    <p class="intro">My name is Sazal</p>
    <p style="display:none">I live in Dhaka</p>
    <p>My best friend is Programming</p>
</body>
</html>

ফলাফল(output):

Selector Example

<< Previous Next >>

লেখকঃ ঢাকা প্রকৌশল ও প্রযুক্তি বিশ্ববিদ্যায়ের(DUET) কম্পিউটার সায়েন্স এ্যান্ড ইঞ্জিনিয়ারিং(CSE) বিভাগের ৪র্থ বর্ষের এক জন ছাত্র। তিনি ওয়েব ডিজাইন, ওয়েব ডেভলপমেন্ট এর বিভিন্ন বিষয় যেমন : এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, জে কোয়েরি, পিএইচপি, .Net ইত্যাদি বিষয়ের উপর অভিজ্ঞ। তিনি ACM ICPC সহ বিভিন্ন আন্তর্জাতিক প্রোগ্রামিং প্রতিযোগীতায় অংশগ্রহন করেছেন। তাকে ফেসবুকে অনুসরন করতে এখানে ক্লিক করুন।