All CSS Selectors ( Part – 1 )

A

::before / ::after 

::before এবং ::after এই ২টি হলো CSS এর pseudo-elements যার মাধ্যমে আমরা HTML এর কোন Element এর আগে এবং পরে কোন content বসাতে পারি। এখানে HTML এর কোন content দেওয়ার দরকার হয় না আমরা CSS এর মাধ্যমেই content বসিয়ে দিতে পারি। যেমন –

div::before {
  content: "before";
}
div::after {
  content: "after";
}

:active

:active pseudo selector টি ব্যবহার করা হয় HTML এর link এর ক্ষেত্রে। যখন HTML এর কোন ১ টি লিংক press করা অবস্থায় থাকে মানে link টি চাপ দিয়ে ধরে রাখি সেই ক্ষেত্রে আমরা এই :active নামের pseudo selector এর মাধ্যমে এই link এর appearance পরিবর্তন করতে পারি। যেমন – যখন কোন ১ টি লিংক এ press করব তখন এর কালার হবে লাল এবং font-size হবে 30px. যেমন –

a:active {
    color: red;
    text-decoration: overline;
}

:any-link

:any-link নামের pseudo-class এর মাধ্যমে আমরা HTML এর সকল লিংকে একই সাথে style করতে পারি। মেযন ধরুন আমাদের HTML ডকুমেন্টে ১০ টি যে কোন লিংক আছে। এখন যদি আমরা চাই যে এই ১০ টি লিংকের জন্য একই style ব্যবহার করব তাহলে আমরা লিখব-

:any-link {
    color: yellow;
    font-weight: bold;;
}

Adjacent sibling

CSS এ adjacent sibling combinator ব্যবহার করা কোন ১ টি HTML Element এর পরের immediate Element কে ধরার জন্য। যেমন-

<div>
    <p>I'm a paragraph</p>
    <p>I get selected!</p>
</div>
<h3>i am h3 </h3>
<h3>I am h3 2</h3>
<div>
    <p>I'm a paragraph</p>
    <h2>Monkey hair</h2>
    <p>I will NOT get selected</p>
</div>

এখানে আমরা যদি প্রথম <h3> Element কে style করতে চাই তাহল আমরা adjacent sibling combinato দিয়ে করতে পারি এ ভাবে –

div + h3 {
    color: green;
}

এখানে adjacent sibling combinator এর জন্য + (প্লাস) চিহ্ন ব্যবহার করা হয।

[attribute]

CSS এ HTML Elements গুলোকে অনেকভাবেই select করা যায়। এর মধ্যে সবচেয়ে বেশি ব্যবহার করা হয় HTML tag কে ধরে। তবে Elements এর attribute ধরে করা হয় যেমন class এবং ID attribute ধরে তাই না? আরেকভাবে করা যায় তা হলো –

a[target] {
    background-color: yellow;
}

এই কোডে আমরা বলছি যে যত a ট্যাগ এবং এর target নামের attribute আছে তা ধর এবং background-color কে yellow করে দাও।

a[target="_blank"] {
     background-color: yellow;
}

এখানে বলছি যে, যে a ট্যাগের target নামের attribute আছে এবং এর ভ্যালু _blank তাদের background-color কে yellow করে দাও।

[title~=flower] {
    border: 5px solid yellow;
}

এখানে বলছি যে ট্যাগের title নামের attribute আছে এবং এর ভ্যালু flower তাদের border কে 5px solid yellow; করে দাও।

[class|=top] {
     background: yellow;
}

এখানে বলছি যে ট্যাগের class এর নাম প্রথমে top দিয়ে শুরু হয়েছে তাদের background এর কালার yellow করে দাও।

[class$="test"] {
     background: yellow;
}

এ‌কানে বলছি যে, ট্যাগের class এর নাম test দিয়ে শেষ হয়েছে তাদের ackground এর কালার yellow করে দাও।

আমরা আবার HTML Form এর input fields গুলোকেও এই Attribute Selector এর মাধ্যমে ধরতে পারি যেমন –

input[type="text"] {
    margin-bottom: 10px;
}

এখানে বলছি যে সকল input fields আছে যাদের type টা হলো text তাদের margin-bottom করে দাও 10px।

C

:checked

CSS এর :checked হলো ১টি pseudo-class যা ব্যবহার করা হয় HTML এর input type – checkbox অথবা radio এর জন্য। :checked তখনই কাজ করবে যখন checkbox অথবা radio input type টি checked অবস্থায় থাকবে। যেমন-

<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>

CSS কোড –

input[type="checkbox"]:checked + label {
    background-color : lightgreen;
}

এখানে বলা হচ্ছে যে, input type – checkbox যখন checked অবস্থায় থাকবে তখন এর immeditate label নামের tag টি ধর এবং তার background কালার lightgreen করে দাও। ঠিক তেমনি input type – radio এর জন্যও কাজ করবে।

Child

CSS এ child combinator হলো “greater than” symbol টা। মানে এই চিহ্ন টা >. কোড লিখতে হয় এই রকম –

ol > li {
    color: red;
}

এর মানে হলো ঐ সব li ট্যাগগুলোকে ধর যারা কিনা directly ol এর descendants। যেমন –

<ol>
    <li>WILL be selected</li>
    <li>WILL be selected</li>
    <ul>
        <li>Will NOT be selected</li>
        <li>Will NOT be selected</li>
    </ul>
    <li>WILL be selected</li>
</ol>

এখানে ol এর descendants হলো প্রথম ২ টি li এবং শেষ li ট্যাগটি।

Class

CSS এ class selector টি নিতে হয় dot (.) চিহ্ন দিয়ে এবং এর পর নাম দিতে হয় । যেমন –

.my_class_name {
}

class ব্যবহার করা হয় HTML Elements গুলোকে ‌ধরার জন্য যাতে করে আমরা ঐ Elements গুলোকে style করতে পারি।

D

:default

এই pseudo selector টি দিয়ে সহজেই HTML এর selected এলিমেন্ট ধরা যাবে। যেমন- Radio বাটন বা Checkbox ফিল্ডে যদি কোন ১টি আগে থেকেই selected অবস্থায় থাকে তাহলে এই pseudo selector দিয়ে সেই এলিমেন্টকে সহজেই ধরা যাবে বা style করা যাবে। যেমন-

input[type="radio"]:default {
    content: ' (default)';
    color: #999;
    font-style: italic;
}

:dir

যদি কোন HTML ডকুমেন্টে এ elements এর ভিতরে dir নামে attribute টি থাকে এবং যদি এই elements কে আমরা ধরতে চাই তাহলে এই pseudo-class ব্যবহার করতে পারি। যেমন-

Some Content<div class="item" dir="rtl">
    <p>Some Content</p>
</div>

এখন এই div টাকে আমরা এভাবে ধরতে পারি-

.item:dir(rtl) {
  background: red;
  color: #fff;
}

:disabled

HTML ডকুমেন্টে এ FORM elements এর মধ্যে আমরা চাইলে input ফিল্ডগুলোকে disable করে দিতে পারি disabled নামের attribute এর মাধ্যমে। যেমন-

<input type="text" name="username" disabled/>

এখানে এই input ফিল্ডকে আমরা disable করে দিয়েছি disabled নামের attribute এর মাধ্যমে। এখন এই disabled কৃত ফিল্ডকে যদি আমরা CSS দিয়ে ধরতে চাই তাহলে আমরা এই pseudo-class টি ব্যবহার করতে পারি এই ভাবে –

input:disabled {
    background-color : salmon;
}

E

:empty

HTML এর elements এর ভিতরে যদি কোন কনটেন্ট না থাকে মানে খালি থাকে তাহলে আমরা :empty pseudo-class টি ব্যবহার করতে পারি। যেমন-

<section>
    <p>Here is some content.</p>
</section>
<section>
</section>

এখানে প্রথম section এর ভিতরে কনটেন্ট আছে কিন্তু দ্বিতীয় section এর ভিতরে কোন কনটেন্ট নাই। এখন আমরা যদি এই খালি section টিকে CSS দিয়ে Style করতে চাই তাহলে আমরা লিখব এইভাবে –

section:empty {
    background-color: tomato;
}

:enabled

আমরা জানি যে কিভাবে কোন একটি input field কে disable করতে হয়, তাই না? এখন কোন ১টি HTLML FORM এ অনেকগুলো input, select, textarea ফিন্ডেরে মধ্যে ১টি input field শুধু disabled অবস্থায় আছে। তাহলে বাকি ফিল্ডগুলো কি অবস্থায় আছে, বলেন তো? হ্যা সিম্পল, enable অবস্থায় আছে। এখন এই enable কৃত ফিল্ডগুলো ধরতে হলে আমরা এই :enabled pseudo-class টি ব্যবহার করতে পারি। যেমন-

input:enabled {
    background-color: tomato;
}