জেকুয়েরি :first সিলেক্টর
সংজ্ঞা এবং ব্যবহার
:first সিলেক্টরের মাধ্যমে কোন একটি নির্দিষ্ট এলিমেন্টের প্রথমটিকে সিলেক্ট করা হয়।
একটি গ্রুপের প্রথম এলিমেন্টটিকে সিলেক্ট করার জন্য এই সিলেক্টরটি বেশিরভাগ সময়ই অন্য আরেকটি সিলেক্টরের সাথে ব্যবহার করা হয়। (নিচের উদাহরণ লক্ষ্য করুন)
সিনট্যাক্স
$(":first")
:first সিলেক্টর সংক্রান্ত উদাহরণ
প্রথম <ul> এলিমেন্ট সিলেক্ট
নিচের উদাহরণে দেখানো হলো কিভাবে একটি ডকুমেন্টের প্রথম <ul> এলিমেন্টটিকে সিলেক্ট করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :first সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul:first").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p>আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p>আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li>এইচটিএমএল</li>
<li>সিএসএস</li>
<li>জাভাস্ক্রিপ্ট</li>
<li>পিএইচপি</li>
<li>এসকিউএল</li>
</ul>
<ul>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
</ul>
<ul>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল
:first এবং :first-child সিলেক্টরের মধ্যে পার্থক্য
নিচের উদাহরণে :first এবং :first-child সিলেক্টরের মধ্যে পার্থক্য দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :first & .first-child সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnOne").click(function(){
$("li:first").css({
"background-color": "green",
"color": "white",
});
});
$("#btnTwo").click(function(){
$("li:first-child").css({
"background-color": "yellow",
"color": "red",
});
});
});
</script>
</head>
<body>
<button id="btnOne">:first selector</button>
<button id="btnTwo">:first-child selector</button>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p>আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p>আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li>এইচটিএমএল</li>
<li>সিএসএস</li>
<li>জাভাস্ক্রিপ্ট</li>
<li>পিএইচপি</li>
<li>এসকিউএল</li>
</ul>
<ul>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
</ul>
<ul>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল