All CSS Selectors ( Part – 3 )

CSS টিউটোরিয়ালের এই পর্বে আমরা আলোচনা করব CSS Selector (Part-3) নিয়ে। আপনি চাইলে CSS Selectors (Part-2) এবং CSS Selectors (Part-1) দেখে আসতে পারনে। তো চলুন শুরু করা যাক 🙂

:last-child 

CSS Selectors এ প্রথমে আমরা শিখব :last-child selector নিয়ে। এর মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরের last element টাকে ধরতে পারব। যেমন-

<article>
    <p>Lorem ipsum...</p>
    <p>Dolor sit amet...</p>
    <p>Consectetur adipisicing...</p>
    <p>Last paragraph...</p>
</article>

উপেরের HTML Code এ আমরা যদি এই <p>Last paragraph…</p> লাইনটিকে মানে শেষের element টিকে ধরতে চাই তাহলে লিখব-

p:last-child {
    font-size: 20px;
}

এখন দেখব যে, এই <p>Last paragraph…</p> লাইনটি এর font-size হয়ে গিয়েছে 20px।

:last-of-type

:last-of-type selector এর মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরের নির্দিষ্ট ১টি last element ধরতে পারব। যেমন ধরুন আমাদের এই HTML Code টা আছে-

<article>
    <h1>A Title</h1>
    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>
    <p>Paragraph 3.</p>
    <img src="...">
</article>

এখানে আমরা যদি চাই যে শেষ p ট্যাগকে ধরব তাখন কি করব? :last-child দিয়ে করব? না কারন এখানে last child হলো img। তাই শেষ p ট্যাগকে ধরতে হলে আমরা লিখব –

p:last-of-type {
    color : red;
}

:link

:link selector হলো ১টি pseudo-class যার মাধ্যমে আমরা ওয়েবসাইটের সকল anchor কে ধরতে পারব যেমন-

a:link {
    color : blue;
}

তার মানে আমাদের ওয়েবসাইটে যত রকম anchor আছে তাদের কালার হয়ে যাবে blue।

::marker

::marker pseudo-element এর মাধ্যমে আমরা list item এর যে marker আছে সেগুলোকে সহজেই style করতে পারব। যেমন-

<ol>
   <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
</ol>
<ul>
   <li>Apple</li>
    <li>Pen</li>
     <li>Ball</li>
</ul>

উপরের HTML Code গুলোকে যদি আমরা ব্রাউজারে চালাই তাহলে আমরা বুলেট চিহ্ণ এবং নাম্বার দেখতে পাব, তাই না? এই সকল বুলেট চিহ্ণ এবং নাম্বারগুলো style করতে চাইলে আমরা ::marker pseudo-element ব্যবহার করব-

ol li::marker {
    color: yellow;
    font-weight: bold;
}
ul li::marker {
    font-size: 30px;
    color: green;
}

এখন আমরা দেখতে পাব যে, নাম্বারের font-size হয়ে গিয়েছে 30px এবং color হয়ে গিয়েছে green। আবার বুলেট চিহ্ণগুলোর color হয়ে গিয়েছে yellow এবং font-weight হয়ে গিয়েছে bold।

:not()

মনে করি আমাদের এই রকম HTML Code আছে –

<ul>
    <li></li>
    <li class="different"></li>
    <li></li>
</ul>

এখন আমরা চাই যে, সকল li ট্যাগকে style করব কিন্তু যেসকল li ট্যাগের different নামরে CSS Class আছে তাদেরকে ধরব না। এই সকল ক্ষেত্রে আমরা এই :not() pseudo class ব্যবহার করব। যেমন –

li:not(.different) {
    font-size : 30px;
}

এখানে দেখা যাবে যে, প্রথম এবং তৃতীয় li ট্যাগের এর font-size হয়ে গিয়েছে 30px কিন্তু দ্বিতীয় li ট্যাগের font-size কিন্তু পরিবর্তন হবে ন।

:nth-child

:nth-child selector এর মাধ্যমে আমরা ১টি Parent element এর ভিতের তার বিভিন্ন child element গুলোকে ধরতে পারব। যেমন-

<article>
    <p>Good Morning</p>
    <p>Good Evening</p>
    <p>Good Afternoon</p>
    <p>Good Night</p>
    <p>Good Girl</p>
    <p>Good Boy</p>
    <p>Good</p>
</article>

উপরের HTML Code এ আমরা যদি চাই যে ৩ নাম্বার p ট্যাগটাকে style করব তাহলে কিভাবে করব? হ্যা তার জন্য আমরা এই :nth-child selector টি ব্যবহার করব যেমন-

article p:nth-child(3) {
    color : salmon;
}

আমরা যদি ৪ নাম্বার p ট্যাগটাকে style করতে চাইতাম তাহলে আমরা লিখতাম p:nth-child(4).
আবার এখন যদি আমরা চাই যে, সকল odd লাইনগুলোকে style করব মানে বিজোড় লাইনগুলো তাহলে আমরা লিখব-

article p:nth-child(odd) {
    color : salmon;
}

এখন আমরা দেখব যে, ১, ৩, ৫ এভাবে বিজোড় p ট্যাগগুলোর CSS Color হয়ে গিয়েছে salmon। আবার যদি even মানে জোড় লাইনগুলো style করতে চাই তাহলে লিখব-

article p:nth-child(even) {
    color : salmon;
}

আবার আমরা যদি চাই যে, ৩, ৬, ৯, ১২ লাইনগুলোকে style করব তাহলে কি করব? হ্যা তার জন্য ১টি formula আছে আর তা হলো –

article p:nth-child(3n) {
    color : salmon;
}

এখানে 3n এর হিসাব টা হলো এ রকম –
3n = 3 X 0 = 0
3n = 3 X 1 = 3
3n = 3 X 2 = 6
3n = 3 X 3 = 9
3n = 3 X 4 = 12
মানে প্রতি বারে n এর মান ১ করে বাড়বে তাতে কারে আমরা পাবো 0, 3, 6, 9, 12 ইত্যাদি।
শুধু যে n দিতে পারব তাই না আমরা চাইলে 3n -1, 4n -1 ইত্যাদিও দিতে পারব। তাতে করে হিসাবটাও হবে সেভাবে। যেমন-
4n -1 = 4 X 0 – 1 = 0
4n -1 = 4 X 1 – 1 = 3
4n -1 = 4 X 2 – 1 = 7
বুজতে পেরেছেন?

:nth-last-child

:nth-last-child selector টি :nth-child selector এর মত কিন্তু পার্থক্য হলো :nth-child কাউন্ট করে প্রথম থেকে আর :nth-last-child কাউন্ট করে শেষের থেকে মেযন-

<article>
    <p>Good Morning</p>
    <p>Good Evening</p>
    <p>Good Afternoon</p>
    <p>Good Night</p>
    <p>Good Girl</p>
    <p>Good Boy</p>
    <p>Good</p>
</article>

এখানে আমাকে যদি বলা হয় শেষের ২ নাম্বার p ট্যাগকে style কর, তাহলে কি করব? হ্যা তার জন্য আমরা :nth-last-child selector ব্যবহার করব। যেমন-

article p:nth-last-child(3) {
    color : salmon;
}

এই :nth-last-child selector টি ব্যবহার করা হয় যখন আমারা জানবো না যে কয়টা child element আছে parent element এর ভিতর।

:nth-of-type

The :nth-of-type selector এর মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরের child element গুলোকে ধরতে পারব। যেমন ধরুন আমাদের এই ধরনের ১টি HTML Code আছে –

<section>
    <h1>Apple</h1>
    <p>Orange</p>
    <p>Banna</p>
    <p>Yellow</p>
    <p>Purple</p>
</section>

এখন আমরা যদি চাই যে, প্রথম p ট্যাগকে color করব তখন যদি আমরা লিখি –

section p:nth-child(2) {
    color: red;
}

তাহলে কি হবে? না হবে না কারন :nth-child এর নিয়ম হলো যে – নির্দিস্ট child element ছাড়া অন্য কোন element হলো কাজ করবে না। মানে parent element এর ভিতর শুধু নির্দিষ্ট child element থাকবে। তাহলে এখন কি করব আমরা? হ্যা আমাদের ব্যবহার করতে হবে –

section p:nth-of-type(2) {
    color: green;
}

:nth-last-of-type

The :nth-last-of-type selector এর মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরের child element গুলোকে ধরতে পারব। কিন্তু প্রথম থেকে শুরু করবে না, শুরু করবে শেষের দিক থেকে। মানে :nth-of-type এ কাউন্টিং শুরু হয় প্রথম থেকে আর :nth-last-of-type এ কাউন্টিং শুরু হয় শেষের দিক থেকে। যেমন ধরুন আমাদের এই ধরনের ১টি HTML Code আছে –

<section>
    <h1>Apple</h1>
    <p>Orange</p>
    <p>Banna</p>
    <p>Yellow</p>
    <p>Purple</p>
    <h2>Last Element</h2>
</section>

এখন আমরা যদি চাই যে, শেষের দিক থেকে ২য় p ট্যাগকে color করব তখন যদি আমরা লিখব –

section p:nth-last-of-type(2) {
    color: green;
}

আশা করি CSS Selectors এই পর্বটি ভালো লেগেছে। যদি বুঝতে কোন সমস্যা হয় তাহলে অবশ্যই কমেন্টের মাধ্যমে জানাবেন।
ধন্যবাদ 🙂