All CSS Selectors ( Part – 4 )

All CSS Selectors এর এই টিউটোরিয়ালে আজকে আমরা আলোচনা করব :only-child, :only-of-type, :optional, :out-of-range, ::placeholder ইত্যাদি নিয়ে। আমরা গত পর্বে আলোচনা করেছিলাম all css selectors ( Part-3 ), all css selectors ( Part-2 ) এবং all css selectors ( Part-1 ) নিয়ে। চলুন শুরু করা যাক 🙂

:only-child

:only-child pseudo-class selector এর মাধ্যমে আমরা কোন ১টি parent element এর যদি ১টি মাত্র child element থাকে তাদেরকে ধরতে পারব। যেমন– আমাদের এই রকম ১টি কোড আছে-

<div>
    <p>This paragraph is the only child of its parent</p>
</div>
<div>
    <p>This paragraph is the first child of its parent</p>
    <p>This paragraph is the second child of its parent</p>
</div>

এখন আমরা যদি –

div p:only-child {
    color: red;
}

এই CSS code টি ব্যবহার করি তাহলে দেখব যে, প্রথম div এর p ট্যাগের কালার red হয়েছে কিন্তু পরের div এর p ট্যাগগুলো কিন্তু কালার হয়নি কারন পরের div এর তো ২টি child element আছে। আমাদের শর্ত হলো শুধুমাত্র ১টি child element থাকবে।

:only-of-type

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

<div>
    <p>I'm the only paragraph element in this div.</p>
    <ul>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
</div>
<div>
    <p>There are multiple paragraphs inside this div.</p>
    <p>Yes there are.</p>
    <ul>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
</div>

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

div p:only-of-type {
    color: red;
}

এখন দেখা যাবে যে, প্রথম div ট্যাগের p ট্যাগটির কালার red হয়ে গিয়েছে। পরের div ট্যাগের p ট্যা‌গগুলোর কোন কালার হয়নি। কারন প্রথম div ট্যাগের ভিতর শুধুমাত্র ১টি p আছে কিন্তু পরের div ট্যাগের ভিতর ২টি p ট্যাগ আছে, তাই।

:optional

:optional pseudo-class এর মাধ্যমে আমরা HTML input element এর optional ফিল্ডগুলোকে style করতে পারব। optional field বলতে বুঝাচ্ছি যে input element এর required নামের attribute টি নেই। required নামের attribute ব্যবহার করা হয় input element টি আবশ্যিক করার জন্য। যেমন- নিচের মত আমাদের ১টি HTML Form আছে –

<form action="">
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td><input type="email" name="username" required></td>
        </tr>
    </table>
</form>

এখানে আমরা দেখতে পাচ্ছি যে, Email Address ফিল্ডটির জন্য required নামের attribute টি ব্যবহার করা হয়েছে। মানে এই HTML input element টি অবশ্যই পুরন করা লাগবে। তাহলে এই Email ফিল্ডটি যদি হয় আবশ্যিক তাহলে optional কোনটি? তাহলে optional হল সেই input element গুলো যাদের কোন required নামের attribute নেই। সুতরাং আমরা যদি username ফিল্ডটিকে style করতে চাই তাহলে আমরা লিখব-

:optional {
    border : 1px solid salmon;
}

এখন দেখা যাবে যে, username ফিল্ডটির border হয়ে গিয়েছে 1px solid salmon।

:out-of-range

:out-of-range pseudo selector টি ব্যবহার করা হয় যখন input element এর value নির্দিষ্ট রেঞ্জের বাহিরে হবে। এই :out-of-range টি ব্যবহার করা হয় মূলত input type “number” এর ক্ষেত্রে। যেমন-

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

উপরের কোডে আমরা max এবং min ভ্যালু দিয়েছি ১০ এবং ৫। এখন এই input element এর ভ্য‍ালু যদি ১০ এবং ৫ এর বাহিরে হয় তাহলে আমরা CSS এর :out-of-range pseudo selector এর মাধ্যমে style করতে পারব। যেমন –

input:out-of-range {
    border: 5px solid red;
}

এখন আমরা যদি এই input element এর ভ্যালু ১০ এবং ৫ বাহিরে দেই তাহলে দেখতে পাব যে এই input element এর border হয়ে গিয়েছে 5px solid red।‌

::placeholder

::placeholder pseudo class এর মাধ্য‍মে আমরা সহজেই input element এর যে placeholder থাকে তা style করতে পারব। যেমন –

<input type="email" placeholder="Enter your email address">

এখন আমরা যদি এই placeholder কে কালার করতে চাই তাহলে লিখব-

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}

তাহলে আমরা দেখতে পাব যে, placeholder এর কালার red হয়ে গিয়েছে। তবে উপরের কোডটি ব্যবহার করলে শুধু Chrome, Opera এবং Safari ব্রাউজারে এই placeholder এর কালার পরিবর্তন হবে। কিন্তু আমরা যদি অন্যান্য ব্রাউজারে সাপোর্ট দিতে চাই তাহলে লিখতে হেব-

::-moz-placeholder { /* Firefox 19+ */
    color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
    color: pink;
}
:-moz-placeholder { /* Firefox 18- */
    color: pink;
}

:required

:required pseudo class selector টি ব্যবহার করা হয় যে সকল HTML Input Field এ required নামের attribute টি দেওয়া আছে। যেমন-

<form action="">
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td><input type="email" name="username" required></td>
        </tr>
    </table>
</form>

এখানে Email Address ফিল্ডটি required মানে অবশ্যই পূরন করতে হবে। এখন এই ফিল্ডকে style করতে হলে আমরা লিখব-

:required {
    background: red;
}

মানে যে সকল Input Field এর required নামের attribute টি রয়েছে তাদের background কালার হয়ে যাবে red।

::selection

আমরা যখন কোন ১টি text কে মাউস বা কিবোর্ডের মাধ‍্যমে select করি আর তখন যদি ঐ select কৃত text এর background color পরির্বতন করতে চাই তাহলে এই ::selection pseudo element টি ব্যবহার করব। যেমন-

::selection {
    background: yellow;
}

এখান দেখা যাবে যে, text কে আমরা select করেছি তার background color হয়ে গিয়েছে yellow।

:valid

:valid selector এর মাধ্যমে আমরা input elements এর কোন valid content কে style করতে পারব। এই valid content টি নির্ধারন করা হয় input elements এর type attribute এর ভ্যালুর উপর।

<form action="">
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text" name="username" required></td>
        </tr>
        <tr>
            <td>Email Address</td>
            <td><input type="email" name="email" required></td>
        </tr>
    </table>
</form>

এখন উপরের ফিল্ডগুলোতে আমরা যদি কোন valid content দেই যেমন- Email Address ফিল্ডটিতে যদি Email Address না সঠিক ভাবে দেই তাহলে এই :valid selector এর মাধ্যমে সহজেই input field টাকে style করতে পারব। যেমন-

input:valid {
    background: green;
}

এখন আমরা যদি সঠিক Email Address বা username ফিল্ডে কোন valid ডাটা দেই তাহলে এর background কালার হয়ে যাবে green।

:visited

আমাদের ওয়েবসাইটে যে সকল anchor link রয়েছে আর তাদের মধ্যে যে সকল anchor link এ অলরেডি ভিজিট করা হয়েছে যেসই সকল anchor link কে style করতে চাইলে আমরা এই :visited pseudo-class selector ব্যবহার করতে পারি। যেমন-

a:visited {
    color: gray;
}

এখন দেখা যাবে যে সকল anchor link ১বার ভিজিট করা হয়েছে তাদের color হয়ে গিয়েছে gray।
আশা করি এই All CSS Selectors টিউটোরিয়ালটি ভাল লেগেছে। যদি কোন কিছু বুঝতে সমস্যা হয় তাহলে comments এ জানাবেন।
ধন্যবাদ 🙂