path: root/files/bn/learn/css/building_blocks/selectors/index.html

---
title: নির্বাচক সমুহ
slug: Learn/CSS/Building_blocks/Selectors
tags:
  - Beginner
  - CSS
  - CSS Selector
  - CSS:Getting_Started
  - Example
  - Guide
  - NeedsBeginnerUpdate
  - NeedsLiveSample
  - NeedsUpdate
  - Web
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
original_slug: Web/CSS/Getting_Started/নই
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}<span class="seoSummary">এটি <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।</span></p>
<h2 class="clearLeft" id="তথ্যঃ_নির্বাচকসমুহ">তথ্যঃ নির্বাচকসমুহ</h2>
<p>সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ</p>
<pre class="brush: css">strong {
  color: red;
}
</pre>
<p>সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য়<code> strong</code> দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।</p>
<p>আরো বিস্তারিত</p>
<p>বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।</p>
<div class="tuto_details">
 <p>মূলশব্দ <code>color</code> হল একটি বৈশিষ্ট্য এবং <code>red</code> হল একটি মান।</p>
 <p>একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।</p>
 <p>এই টিউটোরিয়াল এ নির্বাচক যেমন <code>strong</code> উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।</p>
</div>
<p>নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।</p>
<p>ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।</p>
<p>সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এবং <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
<h3 id="নির্বচকসমুহের_ক্লাস">নির্বচকসমুহের ক্লাস</h3>
<p><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।</p>
<p>আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।</p>
<h3 id="নির্বাচকসমুহের_আইডি">নির্বাচকসমুহের আইডি</h3>
<p><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।</p>
<p>আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।</p>
<div class="tuto_example">
 <div class="tuto_type">
  উদাহরণ</div>
 এই এইচ টি এম এল ট্যাগের একটি <code>class</code> এট্রিবিউট এবং একটি <code>id</code> এট্রিবিউট আছেঃ<br>
 <pre class="brush: html">&lt;p class="key" id="principal"&gt;
</pre>
 <p>নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।</p>
 <p>একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস <code>key</code> green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)</p>
 <pre class="brush: css">.key {
  color: green;
}
</pre>
 <p>এই নিয়ম একটি উপাদানকে <strong>id</strong> <code>principal</code> বোল্ড করে :</p>
 <pre class="brush: css">#principal {
  font-weight: bolder;
}
</pre>
</div>
<p>যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।</p>
<div class="tuto_details">
 <div class="tuto_type">
  আরো বিস্তারিত</div>
 <p>আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।</p>
 <p>উদাহরণ স্বরুপ, নির্বাচক <code>.key</code> <code>ক্লাস নাম key যুক্ত </code>সকল উপাদানকে নির্বাচন করে। নির্বাচক <code>p.key</code> ক্লাস নাম <code>key যুক্ত উপাদানকে </code>শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।</p>
 <p>আপনি দুইটি বিশেষ এট্রিবিউট <code>class</code> এবং <code>id দ্বারা নিয়ন্ত্রিত নন</code>। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক <code>[type='button']</code><code>button মানের একটি </code><code>type এট্রিবিউট দ্বারা</code> সকল উপাদানকে নির্বাচিত করে ।</p>
</div>
<p>যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।</p>
<p>যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।</p>
<h3 id="নকল_ক্লাসের_নির্বাচকসমূহ">নকল ক্লাসের নির্বাচকসমূহ</h3>
<p>একটি <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a> সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।</p>
<p>নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> এখানে যান।</p>
<div class="tuto_example">
 <div class="tuto_type">
  Syntax</div>
 <pre class="brush:css">selector:pseudo-class {
  property: value;
}
</pre>
</div>
<h4 id="নকল_ক্লাসসমুহের_তালিকা">নকল ক্লাসসমুহের তালিকা</h4>
<ul>
 <li>{{ Cssxref(":link") }}</li>
 <li>{{ Cssxref(":visited") }}</li>
 <li>{{ Cssxref(":active") }}</li>
 <li>{{ Cssxref(":hover") }}</li>
 <li>{{ Cssxref(":focus") }}</li>
 <li>{{ Cssxref(":first-child") }}</li>
 <li>{{ Cssxref(":nth-child") }}</li>
 <li>{{ Cssxref(":nth-last-child") }}</li>
 <li>{{ Cssxref(":nth-of-type") }}</li>
 <li>{{ Cssxref(":first-of-type") }}</li>
 <li>{{ Cssxref(":last-of-type") }}</li>
 <li>{{ Cssxref(":empty") }}</li>
 <li>{{ Cssxref(":target") }}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":enabled") }}</li>
 <li>{{ Cssxref(":disabled") }}</li>
</ul>
<h2 id="তথ্যঃ_সম্পর্কের_ভিত্তিতে_নির্বাচক_সমুহ">তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ</h2>
<p>উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।</p>
<table id="relselectors">
 <caption>
  সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ</caption>
 <tbody>
  <tr>
   <td style="width: 10em;"><strong>নির্বাচক</strong></td>
   <td><strong>নির্বাচিতসমুহ</strong></td>
  </tr>
  <tr>
   <td><code>A E</code></td>
   <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td>
  </tr>
  <tr>
   <td><code>A &gt; E</code></td>
   <td>Any E element that is a child of an A element</td>
  </tr>
  <tr>
   <td><code>E:first-child</code></td>
   <td>Any E element that is the first child of its parent</td>
  </tr>
  <tr>
   <td><code>B + E</code></td>
   <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td>
  </tr>
 </tbody>
</table>
<p>আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।</p>
<p>আপনি <code>*</code> (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।</p>
<div class="tuto_example">
 <div class="tuto_type">
  উদাহরণ</div>
 <p>একটি এইচ টি এম এল টেবিলের একটি <code>id</code> এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ</p>
 <pre class="brush: html">&lt;table id="data-table-1"&gt;
...
&lt;tr&gt;
&lt;td&gt;Prefix&lt;/td&gt;
&lt;td&gt;0001&lt;/td&gt;
&lt;td&gt;default&lt;/td&gt;
&lt;/tr&gt;
...
</pre>
 <p>এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ</p>
 <pre class="brush:css">    #data-table-1 td:first-child {font-weight: bolder;}
    #data-table-1 td:first-child + td {font-family: monospace;}
</pre>
 <p>ফলাফল এরূপ দেখায়ঃ</p>
 <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <table style="width: 18em; margin-right: 2em;">
      <tbody>
       <tr>
        <td><strong>Prefix</strong></td>
        <td><code>0001</code></td>
        <td>default</td>
       </tr>
      </tbody>
     </table>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<div class="tuto_details">
 <div class="tuto_type">
  আরো বিস্তারিত</div>
 <p>প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।</p>
 <p>আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর <code>class</code> অথবা <code>id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। </code>তা ব্যতীত, সি এস এস কাজ করবে না।</p>
 <p>অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।</p>
 <p>টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables </a>দেখুন।</p>
</div>
<h2 id="কাজঃ_ক্লাস_এবং_আইডি_নির্বাচক_সমুহের_ব্যবহার">কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার</h2>
<p style="margin-left: 40px;">১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।</p>
<p style="margin-left: 40px;">২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ</p>
<ol>
 <li>
  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="first"&gt;
      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
    &lt;p id="second"&gt;
      &lt;strong&gt;C&lt;/strong&gt;ascading
      &lt;strong&gt;S&lt;/strong&gt;tyle
      &lt;strong&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ<br>
  <pre class="brush:css">strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
</pre>
 </li>
 <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ<br>
  <table style="border: 2px outset #36b; padding: 1em;">
   <tbody>
    <tr>
     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
    </tr>
    <tr>
     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
    </tr>
   </tbody>
  </table>
  লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।<br>
  <br>
  <p>ক্লাস নির্বাচকসমুহ <code>.carrot</code> এবং <code>.spinach</code> ট্যাগ নির্বাচক <code>strong</code> এর উপরে প্রাধান্য পায়।</p>
  <p>আইডি নির্বাচক <code>#first</code> ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।</p>
 </li>
</ol>
<div class="tuto_example">
 <div class="tuto_type">
  প্রতিদ্বন্দ্বিতাসমুহ</div>
 <ol>
  <li>আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।<br>
   <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
    <tbody>
     <tr>
      <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
     </tr>
     <tr>
      <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
     </tr>
    </tbody>
   </table>
  </li>
  <li>আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ<br>
   <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
    <tbody>
     <tr>
      <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
     </tr>
     <tr>
      <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
     </tr>
    </tbody>
   </table>
  </li>
 </ol>
 <div class="tuto_details" id="tutochallenge">
  <div class="tuto_type">
   Possible solution</div>
  <ol>
   <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
    <pre class="brush: css">#second { color: blue; }
</pre>
    A more specific selector, <code>p#second</code> also works.</li>
   <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
    <pre class="brush: css">p { color: blue; }
</pre>
   </li>
  </ol>
  <a class="hideAnswer" href="#challenge">Hide solution</a></div>
 <a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
<h2 id="কাজঃ_নকল_ক্লাসের_নির্বাচকসমুহের_ব্যবহার">কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার</h2>
<ol>
 <li>নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ</li>
 <li>
  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ<br>
  <pre class="brush: css">a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}
</pre>
 </li>
 <li>ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য):
  <table style="border: 2px outset #36b; padding: 1em;">
   <tbody>
    <tr>
     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>
<h2 id="কাজঃ_সম্পর্ক_এবং_নকল_ক্লাসের_ভিত্তিতে_নির্বাচকসমুহের_ব্যবহার">কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার</h2>
<p>সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে  পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create <strong>pure-CSS dropdown menus</strong> তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript </a>ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ</p>
<pre class="brush: css">div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}</pre>
<p>প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ</p>
<pre class="brush: html">&lt;div class="menu-bar"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="example.html"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>আপনার সম্পূর্ণ <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> দেখুন একটি সম্ভব সংকেতের জন্য।</p>
<h2 id="পরবর্তীতে_কি">পরবর্তীতে কি?</h2>
<p>আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a> করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>