All CSS Selectors ( Part – 2 )

আজকের এই CSS Tutorial এ আমরা শিখব CSS Selectors নিয়ে। গতপর্বে দেখেছিলাম CSS Selectors (Part-1) আর এই পর্বে আমরা দেখব CSS Selectors(Part-2)। তাহলে চলুন শুরু করা যাক 🙂

::first-letter

CSS Selectors এ প্রথমেই আমরা আলোচনা করব ::first-letter নিয়ে। :first-letter এটি হলো css এর ১টি pseudo element যার মাধ্যমে আমরা কোন element এর প্রথম অক্ষর টিকে style করতে পারি। যেমন- আমাদের যদি এই রকম ১টি লেখা থাকে –
<p>The first letter is bold and red</p>
এবং তার style যদি এই রকম হয় –

p::first-letter {
    font-weight: bold;
    color: red;
}

তাহলে দেখা যাবে যে, p ট্যাগের প্রথম অক্ষরটির font-weight হবে bold এবং color হবে red।

::first-line

CSS Selectors এর পরবর্তী Selector হলো ::first-line । ::first-line এটি হলো css এর ১টি pseudo element যার মাধ্যমে আমরা কোন element এর প্রথম লাইনকে style করতে পারি। যেমন- আমাদের যদি এই রকম ১টি লেখা থাকে –
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, quas. Illum minima rem inventore reiciendis deleniti quibusdam harum distinctio, ipsa atque velit, fugit eaque cum ea enim omnis. Repellendus, delectus.</p>
এখান আমরা যদি চাই যে উপরের লেখাটির প্রথম লাইনটিকে style করব তাহলে আমাদের লিখতে হবে-

p::first-line {
    color: salmon;
}

এখন উপেরে লেখাটির প্রথম লাইনের color টি হয়ে যাবে salmon।

:first-child

এই :first-child নামের selector মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরে তার প্রথম child element কে ধরতে পারব। যেমন আমাদের যদি এই রকম ১টি HTML Code থাকে –

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

আর আমরা যদি চাই যে এই article ট্যাগের ভিতরে প্রথম p ট্যাগটাকে style করব তাহলে আমাদের এই :first-child নামের selector এর সাহায্য নিতে হবে যেমন –

article p:first-child {
    color : salmon;
}

উপরের style এর মাধ্যমে আমরা সহজেই প্রথম p ট্যাগকে salmon কালার করে নিতে পারব।

:first-of-type

:first-of-type এর মাধ্যমে আমরা কোন ১টি Parent element এর ভিতরে তার কোন ১টি element এর প্রথম child element কে ধরতে পারব। যেমন আমাদের যদি এই রকম HTML কোড থাকে –

<article>
    <h1>A Title</h1>
    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>
    <p>Paragraph 3.</p>
</article>

আর আমরা যদি চাই যে এই article ট‍াগের ভিতেরর প্রথম p ট্যাগটিকে style করব তাহলে কি করব, বলেন তো? এখন কি :first-child ব্যবহার করলে হবে? না হবে না, কারন এখানে তো প্রথম child হলো h1, তাই না। হ্যা, তাই। তো, প্রথম p ট্যাগটিকে style করতে হলে আমাদের লিখতে হবে –

article p:first-of-type {
    color : salmon;
}

বুঝতে পেরেছেন পার্থক্য টি ?

:focus

মনে করি আমাদের ১টি Registration Form আছে এর এই Form ভিতরে যদি কোন ১টি input field কে আমরা mouse অথবা keyboard এর মাধ্যমে select করি এবং ঐ select করা input field কে যদি style করতে চাই তাহলে এই :focus নামের pseudo class টি ব্যবহার করতে হবে, যেমন-

input:focus {
    background: pink;
}

তাহলে এখন কোন ১টি input field কে যদি select করি তাহলে তার background কালার হয়ে যাবে pink।

General sibling

CSS এ General sibling combinator কে এই চিহ্ন ‍‍‌‌‌‌‌‌~ (tild) দ্বারা বুঝানো হয়। মনে করি আমাদের এই রকম ১টি HTML কোড আছে –

<article>
    <h2>Hello Article</h2>
    <p>Article content will goes to here.</p>
</article>
<h4>After the article element.</h4>
<h4>After the article element 2.</h4>
<article>
    <h2>Hello Article</h2>
    <p>Article content will goes to here.</p>
</article>
<h4>After the article element.</h4>
<h4>After the article element 2.</h4>
<article>
    <h2>Hello Article</h2>
    <p>Article content will goes to here.</p>
</article>
<h4>After the article element.</h4>
<h4>After the article element 2.</h4>

এখন আমরা চাই যে, প্রত্যেকটি article ট্যাগের পরের h4 গুলোকে style করব তাহলে আমরা এই General sibling combinator টির মাধ্যমে লিখব –

article ~ h4 {
    color : red;
}

এখন দেখা যাবে যে, প্রত্যেকটি article ট্যাগের পরের h4 ট্যাগগুলোর color red হয়ে গিয়েছে।

:hover

:hover pseudo class টি ব্যবহার করা হয় যখন আমরা কোন ১টি element এর উপর mouse নিয়ে যাই তখন যদি সেই element কে কোন style করতে চাই তখন এই :hover pseudo class টি ব্যবহার করব যেমন-

a:hover {
    color : salmon;
}

এখন আমাদের ওয়েবসাইটে যত a ট্যাগ আছে তার উপর যদি mouse নিয়ে যাই তখন দেখাে যাবে যে তাদের color হয়ে গিয়েছে salmon।

:in-range

input element এর value যদি কোন ১টি নির্দিষ্ট range এর ভিতরে হয় আর তখন যদি আমরা সেই input element টিকে style করতে চাই তাহলে এই :in-range pseudo selector ব্যবহার করব। যেমন-

<input max="10" min="5" type="number">

এখানে input element হিসেবে number নেওয়া হয়েছে এবং minimum ভ্যালু দেওয়া হয়েছে ৫ আর maximum ভ্যালু দেওয়া হয়েছে ১০। এখন যদি এই input element এর ভ্যালু আমরা ৭ দেই তাহলে এই input element এর ভ্যালুটি আমাদের minimum এবং maximum range এর ভিতরে পরবে, তাই না? হ্যা, ঠিক তাই। আর তখনই যদি আমরা কোন style করতে চাই তাহলে আমরা লিখব এই ভাবে –

input:in-range {
    border: 5px solid green;
}

এর মানে আমরা যদি এই input element এর ভালু ৫ এবং ১০ এ মধ্যে দেই তাহলে এর border হয়ে যাবে 5px solid green।

:invalid

:invalid নামের selector এর মাধ্যমে আমরা কোন ১টি input element এর invalid ভ্যালুকে style করতে পারি। এখানে invalid ভ্যালু নির্ধারন করা হয় সেই input element ইর type এর উপর ভিত্তি করে। যেমন-

<fieldset>
    <label for="email">Email:</label>
    <input type="email" name="email">
</fieldset>

এখানে, আমরা ১টি input element এবং তার type হিসেবে নিয়েছি email। এ‌খন আমরা যদি valid কোন email address না দেই তাহলে এই input element কে সহজেই style করতে পারব। যেমন –

input:invalid {
    background: red;
}

এখন এই input element এ যদি কোন ভুল email address দেওয়া হয় তাহলে এর background কালার হয়ে যাবে red।
আশা করি উপরের সকল CSS Selectors গুলো বুঝতে পেরেছেন। যদি কোন CSS Selector বুঝতে না পারেন তাহলে আমাকে comments এর মাধ্যমে জানাবেন, ধ্যনবাদ 🙂