ওয়েব ডিজাইন (পর্ব ১৮) সঠিক সিলেক্ট নির্ধারণ

Samrat Raihan

ওয়েব ডিজাইন (পর্ব ১৮) সঠিক সিলেক্ট নির্ধারণ

আমরা যখন html.এবং css নিয়ে কাজ করি তখন প্রথমে একটা সমস্যা সব সময়ই ঘটে থাকে, নির্দিষ্ট জায়গা সিলেক্ট করতে না পারা।নির্দিষ্ট জায়গা সিলেক্ট করতে না পারলে আমরা সুন্দর ভাবে ডিজাইন করতে পারবোনা।এই খুবই গুরুত্বপূর্ন।

CSS selector 

সিএসএস সিলেক্টর এর মাধ্যমে আমরা নির্দিষ্ট জায়গা সিলেক্ট করতে পারবো।নির্দিষ্ট জায়গা আলাদা স্টাইল দিতে পারবেন, এবং অতিরিক্ত ক্লাস এবং আইডি ব্যবহার ছাড়া খুব সহজেই ডিজাইন করতে পারবেন। 
সিলেক্টরকে সাধারনত ৪ ভাগে বিভক্ত করা হয়!

  1. সিম্পল সিলেক্টর (Simple Selector) - যে গুলো সাধারনত ট্যাগ,আইডি ও ক্লাসের মাধ্যমে সিলেক্ট করা হয়।
  2. কম্বিনেটর সিলেক্টর(Combinator selectors) - আলাদা আলাদা সিলেক্টর কে  সংযুক্ত করে কাজের নির্দেশনা প্রদান করা হয়।
  3. সুডো ক্লাস  ও এলিমেন্টস সিলেক্টর(Pseudo-classes) - নির্দিষ্ট ইফেক্ট অথবা ভিন্ন কাজের নির্দেশনার জন্য ব্যবহৃত হয়।
  4. অ্যাটরিবিউট সিলেক্টর - (Attribute selectors) -  নির্দিষ্ট ট্যাগ এর সাথে অ্য়াটরিবিউট কে সিলেক্ট করা জন্য ব্যবহার করা হয়।

1. সিম্পল সিলেক্টর (Simple Selector)

যে সিলেক্টর এর মাধ্যমে আমরা সাধারন ভাবে  *(স্টার), ট্যাগ  নেম, আইডি ও ক্লাস, এর মাধ্যমে নির্দিষ্ট স্থান চিন্হিত করা যায়।
নিচের কোড গুলো নোটপ্যাডে ট্রাই করুন।
  
<!DOCTYPE HTML>

  
<html lang="en-US">

  
<head>

  

     <meta charset="UTF-8">
  

  

     <title>Simple
    selectors</title>
  

  

     <style type="text/css">
  

  
 p{

  
 color:red;

  
 text-align:center;

  
 }

  
 #data{

  
 color:black;

  
 text-align:center;

  
 }

  
 .info{

  
 color:green;

  
 text-align:center;

  
 }

  
 div.info2{

  
 color:yellow;

  
 text-align:center;

  
 }

  
 *{

  
 font-size:25px;

  

     } /*সর্বজনিন  সিলেক্টরকে এক
    সাথে কাজের নির্দেশনা প্রদান করে। */
  

  
 

  
 p, div{

  
 background-color:pink;

  
 }

  
 </style>

  
</head>

  
<body>

  

     <p>সিএসএস এলিমেন্ট সিলেক্টর
    নির্দিষ্ট ট্যাগ চিন্হিত করার জন্য শুধু ট্যাগ কে ধরা হয়।</p>
  

  

     <div id="data">এখানে সিএসএস
    আইডি সিলেক্টর এর মাধ্যমে ইউনিক আইডি কে ধরা হয়।</div>
  

  

     <div class="info">সিএসএস ক্লাস
    সিলেক্টর এর মাধ্যমে নির্দিষ্ট ক্লাসকে ধরা হয়।</div>
  

  

     <div class="info2">নির্দিষ্ট
    ক্লাসের নির্দিষ্ট ট্যাগকে সিলেক্ট করা জন্য ব্যবহার করা হয়।</div>
  

  
</body>

  
</html>


কম্বিনেটর সিলেক্টর(Combinator selectors)


Combinator সিলেক্টর এর মাধ্যমে একাধিক নির্বাচকের মধ্যে সম্পর্ক স্থাপন করা হয়।

কয়েকটি মাধ্যমে এই কম্বিনেটর সিলেক্টর এর কাজ করা হয়।

  1. Descendant selector - নির্দিষ্ট সিলেকশনের মধ্যে এর নির্দিষ্ট সকল সিলেক্ট কে ধরার জন্য (স্পেস ব্যবহার করা হয়।)
  2. Child Selector - নির্দিষ্ট সিলকশনের মধ্যে নির্দিষ্ট সিলেক্ট ট্যাগেকে ধরার জন্য  > (greater than ) ব্যবহার করা হয়। 
  3. Adjacent Sibling Selector - নির্দিষ্ট সিলেক্টর এর পরের সিলেক্টর কে ধরার জন্য + (Plus) ব্যবহার করা হয়।
  4. General Sibling Selector - নির্দিষ্ট ট্যাগের পরের নির্দিষ্ট ট্যাগ গুলো ধরার জন্য ~ (Tilde) ব্যবহার করা হয়।

Descendant selector বুঝতে নিচের কোড ট্রাই করুন 

  
<!DOCTYPE html>

  
<html>

  
<head>

  
<title>Descendant Selector</title>

  
</head>

  
<body>

  
  <style>

  
      div p{

  
        color:red;

  
        background-color:yellow;

  
    }

  
  </style>

  
</body>

  
      <div>

  
        <p>এখানে কাজ করবে</p>

  

               <p>এটাও সিলেকশন
    হবে।</p>
  

  

               <b><p>এখানেও কাজ
    করবে।</p></b>
  

  
       </div>

  
  <p>এখানে কাজ করবে না</p>

  
</html>


Child Selector Selector বুঝতে নিচের কোড ট্রাই করুন 

  
<!DOCTYPE html>

  
<html>

  
<head>

  
<title>Child Selector</title>

  
</head>

  
  <style>

  
    div > p{

  
      color:red;

  
      text-align:center;

  
      }

  
  </style>

  
<body>

  
  <div>

  
    <p> এখানে কাজ করবে</p>

  
    <p>এখানে কাজ করবে।</p>

  
    <b>

  
      <p>এখানে কাজ করবেনা।</p>

  
    </b>

  
  </div>

  
  <p>এখানে কাজ করবেনা।</p>

  
 </body>

  
</html>



Adjacent Sibling Selector বুঝতে নিচের কোড ট্রাই করুন 


  
<!DOCTYPE html>

  
<html>

  
<head>

  
<style>

  
div + p {

  
    text-align:center;

  
    background-color:pink;

  
}

  
</style>

  
</head>

  
<body>

  


  
<div>

  
  <p>এখানে কাজ করবে না।</p>

  
  <p>এখানে কাজ করবে না।</p>

  
</div>

  


  
<p>এখানে কাজ করবে কারন Div ট্যাগের পরের P ট্যাগ</p>

  
<p>এখানে কাজ করবে না।</p>

  


  
<div>

  
  <p>এখানে কাজ করবে না।</p>

  
  <p>এখানে কাজ করবে না।</p>

  
</div>

  


  
<p>এখানে কাজ করবে কারন Div ট্যাগের পরের P ট্যাগ </p>

  
<p>এখানে কাজ করবে না।</p>

  


  
</body>

  
</html>

General Sibling Selector বুঝেতে নিচের কোড ট্রাই করুন 

  
<!DOCTYPE html>

  
<html>

  
<head>

  
<style>

  
div ~ p {

  
 text-align:center;

  
 color:white;

  
 background-color:green;

  
}

  
</style>

  
</head>

  
<body>

  
<p> কাজ করবে না।</p>

  


  
<div>

  
  <p>কাজ করবে না।</p>

  
</div>

  


  
<p>Paragraph 3.</p>

  
<p>Paragraph 4.</p>

  
<b>এটার পরেও কাজ করবে</b>

  
<p>Paragraph 4.</p>

  
<p>Paragraph 4.</p>

  
<p>Paragraph 4.</p>

  
<p>Paragraph 4.</p>

  
</body>

  
</html>


Pseudo-classes সুডো ক্লাস

এই সুডো ক্লাস দ্বারা আলাদা স্থান ও নির্দিষ্ট উপাদান সিলেক্ট করা জন্য ব্যবহার করা হয়।


কি কি কাজে লাগে এই সুডো ক্লাসঃ
  1. মাউস হভার করার জন্য
  2. লিংক ভিজিট করা অথবা ভিজিট করা হয়নি এমন আলাদা বুঝাতে।
  3. নির্দিষ্ট ফোকাস  এরিয়া সিলেক্ট এর জন্য। 


নিচের HTML এবং CSS দিয়ে ট্রাই করুন

first-child and last-child এর ব্যবহার

  
<style>

  
li:first-child {

  
  color: red;

  
} 

  
li:last-child{

  
color:blue;

  
}

  
</style>

  
<ol>

  

     <li>এইটা কাজ করবে</li>
  

  

     <li>এইটা কাজ করবে
    না।</li>
  

  

     <li>এইটা কাজ করবে
    না।</li>
  

  

     <li>এইটা কাজ করবে</li>
  

  
</ol>



nth-child এর ব্যবহার

  
<style>

  
li:nth-child(2){

  
    color: red;

  
}

  
li:nth-child(3){

  
color:blue

  
}

  
</style>

  
<ol>

  

     <li>এইটা কাজ করবে
    না</li>
  

  

     <li>এইটা কাজ করবে</li>
  

  

     <li>এইটা কাজ করবে</li>
  

  

     <li>এইটা কাজ করবেন
    না।</li>
  

  
</ol>

nth-of-type & nth-last-of-type এর ব্যবহার 

  
<style>

  
p:nth-of-type(2){

  
    background-color: gray;

  
}

  
p:nth-of-type(odd){

  
color:red;

  
}

  
p:nth-of-type(even){

  
color:blue;

  
}

  
p:nth-last-of-type(1){

  
background:green;

  
color:white;

  
}

  
p:nth-last-of-type(2){

  
background-color:black;

  
color:white;

  
}

  
</style>

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  

  

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>



only-child এর ব্যবহার


  
<style>

  
span:only-child{

  
color:red;

  
}

  
</style>

  
<div>

  
<span>এইটা কাজ করবে</span>

  
</div>

  
<span> এইটা কাজ করবেনা</span>

  
<p>

  
<span>এইটা কাজ করবে</span>

  
</p>


only-of-type এর ব্যবহার

  
<style> 

  
p:only-of-type {

  
  background: red;

  
  color:white;

  
}

  
</style>

  


  
<div>

  
<p> এইটা কাজ করবে</p>

  
</div>

  


  
<div>

  
<p> এইটা কাজ করবে না</p>

  
<p> এইটা কাজ করবে না.</p>

  
</div>

  
<span>

  
<p> এইটা কাজ করবে</p>

  
</span>


empty এর ব্যবহার

  
<style> 

  
p:empty {

  
  width: 100px;

  
  height: 50px;

  
  background: #000000;

  
}

  
</style>

  
<p></p>

  
<p>এইগুলোতে কন্টেন্ট আছে তাই কাজ করবেন না</p>

  
<p>এইগুলোতে কন্টেন্ট আছে তাই কাজ করবেন না</p>

not এর ব্যবহার

  
<style>

  
.hmm{

  
color:red;

  
}

  
:not(.hmm){

  
color:blue;

  
}

  
</style>

  


  
<div class="ohh">.hmm ছাড়া এই গুলো</div>

  
<div class="ohh">.hmm ছাড়া এই গুলো</div>

  
<div class="ohh">.hmm ছাড়া এই গুলো</div>

  
<div class="hmm">.hmm ক্লাস ছাড়া সব নিল হবে</div>

  
<div class="hmm">.hmm ক্লাস ছাড়া সব নিল হবে</div>

  
<div>.hmm ছাড়া এই গুলো</div>

  
<div class="hmm">.hmm ক্লাস ছাড়া সব নিল হবে</div>


lang এর ব্যবহার

  
<style>

  
p:lang(bn){

  
    color: red;

  
}

  
p:lang(en){

  
    color: green;

  
}

  
</style>

  
<p lang="bn">আমার সোনার বাংলা</p>

  
<p lang="en">My Golden Bangla</p>


terget এর ব্যবহার

  
 <style>

  
div:target{

  
    color: white;

  
    background-color: red;

  
}

  
</style>

  
<ul>

  
<li><a href="#html">HTML</a></li>

  
<li><a href="#css">CSS</a></li>

  
<li><a href="#js">Javascript</a></li>

  
</ul>

  

    <div id="html">HTML: Lorem ipsum dolor sit amet consectetur,
    adipisicing elit. Nobis, amet quo distinctio architecto, saepe, dolorem rem
    nemo expedita sequi sed quae commodi quisquam impedit nisi totam quos ad
    sunt tempore?
  

  
</div>

  

    <div id="css">CSS: Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Recusandae earum provident, aliquid non alias tempora odio maxime ipsa
    dolores neque iste adipisci quibusdam similique dignissimos doloribus natus
    explicabo beatae fugiat!</div>
  

  

    <div id="js">Javascript: Lorem ipsum dolor sit, amet consectetur
    adipisicing elit. Praesentium cum, voluptatem veniam culpa quidem voluptas,
    nostrum ut asperiores illo quisquam eum id ipsum! Accusantium libero,
    pariatur quaerat excepturi dolores culpa.</div>

link, hover, visited, & active এর ব্যবহার 


  
<!DOCTYPE html>

  
<html>

  
<head>

  
<style>

  
/* unvisited link */

  
a:link {

  
  color: red;

  
}

  


  
/* visited link */

  
a:visited {

  
  color: green;

  
}

  


  
/* mouse over link */

  
a:hover {

  
  color: hotpink;

  
}

  


  
/* selected link */

  
a:active {

  
  color: blue;

  
}

  
</style>

  
</head>

  
<body>

  


  

    <p><b><a href="http://wikijana.com"
    target="_blank">WikiJana.Com</a></b></p>
  

  
</body>

  
</html>


root এর ব্যবহার

  
<style>

  
:root{

  
    --main-color:blue;

  
}

  
.color{

  
    color:var(--main-color)

  
}

  
</style>

  

    <div class="color">Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Quibusdam animi harum laboriosam quos eveniet atque dolorem
    repudiandae iusto architecto, obcaecati cum. Necessitatibus eveniet eius
    laboriosam eum deserunt natus, non dolores!</div>


ফরমে ব্যবহৃত বিভিন্ন ট্যাগ এর সিএসএস

  
<!-- focus এর ব্যবহার -->

  
<style>

  
input:focus {

  
    border: 2px solid red;

  
}

  
</style>

  
<label for="name">Name:</label>

  
<input type="text" id="name" name="name"><br>

  
<!-- focus এর ব্যবহার -->




  
<!-- chacked এর ব্যবহার -->

  
<style>

  

     input[type='radio']:checked + label{
  

  
    box-shadow: 0 0 0 2px red;

  
}

  
</style>

  
<label>Gender:</label>

  
<input type="radio" name="Gender" id="male">

  
<label for="male">Male</label>

  
<input type="radio" name="Gender" id="female">

  
<label for="female">Female</label><br>

  
<!-- chacked এর ব্যবহার -->






  
<!-- enable and disable এর ব্যবহার -->

  
<style>

  
 input[type='text']:enabled{

  
background-color: green;

  
}

  
input[type='text']:disabled{

  
    background-color:pink;

  
}

  
</style>

  
<label for="country">Country:</label>

  
<input type="text" name="country" id="country"><br>

  
<label for="district">District:</label>

  
<input type="text" name="district" id="district" disabled>

  
<br>

  
<!-- enable and disable এর ব্যবহার -->






  
<!-- Required ও Optional এর ব্যবহার -->

  
<style>

  
 input:required{

  
    background-color: purple;

  
}

  
input:optional{

  
    border: 3px solid black;

  
    background-color: blueviolet;

  
}

  
</style>

  
<form action="form.php">

  
<label for="phone">Phone:</label>

  
<input type="tel" name="Phone" id="phone" required><br>

  
<label for="email">Email:</label>

  
<input type="email" name="Email" id="email">

  
<input type="submit" value="Submit"></form>

  
<!-- requard ও Optional এর ব্যবহার -->




  
<!-- in range and out of range এর ব্যবহার -->

  
<style>

  
input:in-range{

  
    background-color: chartreuse;

  
}

  
input:out-of-range{

  
    background-color: crimson;

  
}

  
</style>

  
<label for="age">Age:</label>

  
<input type="number" id="age" name="Age" min="18" max="25">

  
<!-- in range and out of range এর ব্যবহার -->





  
<!-- read only and red write এর ব্যবহার -->

  
<style>

  
 input:read-only{

  
    border: 1px dotted black;

  
}

  
input:read-write{

  
    border:1px solid blue;

  
}

  
</style>

  
<label for="address">Address</label>

  

    <input type="text" id="address" name="Address" value="Bangladesh"
    readonly><br>
  

  
<label for="class">Class:</label>

  
<input type="text" name="Class" id="class">

  
<!-- read only and red write এর ব্যবহার -->






  
<!-- valid ও invalid  এর ব্যবহার -->

  
<style>

  
 input:valid{

  
    color:white;

  
    background-color: green;

  
    border:1px solid blue;

  
}

  
input:invalid{

  
    color:white;

  
    background-color: red;

  
    border: 1px solid pink;

  
}

  
</style>

  
<label for="email">Emaiil:</label>

  
<input type="email" name="Email" id="email">

  
<!-- valid ও invalid  এর ব্যবহার -->






  
<!-- default এর ব্যবহার -->

  
<style>

  
 input:default{

  
    box-shadow: 0 0 8px blue;

  
}

  
option:default{

  
    color:brown;

  
}

  
</style>

  
<input type="radio" name="Gender" id="male">

  
<label for="male">Male</label>

  
<input type="radio" name="Gender" id="female" checked>

  
<label for="female">Female</label><br>

  
<select name="country" id="country">

  

     <option value="US">United
    State</option>
  

  

     <option value="BD"
    selected>Bangladesh</option>
  

  

     <option
    value="IN">India</option>
  

  

     <option
    value="PK">Pakistan</option>
  

  
</select>

  
<!-- default এর ব্যবহার -->


After & Before এর ব্যবহার

নিচের ছবিটি লক্ষ করুন



  
<style>

  
/* after and before এর ব্যবহার */

  
p::before{

  
    background-color: blue;

  
    color: white;

  
    content: "Before ";

  
    display: block;

  
}p::after{

  
    background-color: red;

  
    color: white;

  
    content: "After ";

  
    display: block;

  
}

  
/* after and before এর ব্যবহার */

  
/* first letter and first line এর ব্যবহার */

  
div::first-letter{

  
    color: red;

  
    font-size: 20px;

  
}

  
div::first-line{

  
    background-color:green;

  
}

  
/* first letter and first line এর ব্যবহার */

  
/* selection এর ব্যবহার */

  
span::selection{

  
    color:black;

  
    background-color: blanchedalmond;

  
}

  
/* selection এর ব্যবহার */

  
</style>

  
    <!-- after and before এর ব্যবহার -->

  
    <p>Lorem ipsum dolor sit amet.</p>

  
    <!-- after and before এর ব্যবহার -->

  
    <!-- first letter and first line এর ব্যবহার-->

  
    <div>

  

            Lorem ipsum dolor sit amet consectetur,
    adipisicing elit. Quam, facere! Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Porro praesentium minima reprehenderit amet. Aperiam,
    sunt. Possimus provident vel accusantium maxime.
  

  
    </div>

  
    <!-- first letter and first line এর ব্যবহার-->

  
    <!-- selection এর ব্যবহার -->

  

        <span>Lorem ipsum dolor, sit amet consectetur
    adipisicing elit. Explicabo consectetur deserunt itaque error officiis dolor
    sit quod cum dignissimos sed.</span>
  

  
    <!-- selection এর ব্যবহার -->

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।











Samrat Raihan