সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো নির্দিষ্ট এলিমেন্ট নির্বাচন করার পদ্ধতি।

⚒️সিএসএস নির্দিষ্ট এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

➡️ * - সকল এলিমেন্ট সিলেক্ট করা
➡️ element - নির্দিষ্ট এলিমেন্ট সিলেক্ট করা
➡️ element, element - একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করা
➡️ odd - বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করা
➡️ even - জোড় অবস্থানের এলিমেন্ট সিলেক্ট করা
➡️ #id - নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করা
➡️ .class - নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করা
➡️ select-attribute-group - নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করা
➡️ first-letter - এলিমেন্টের প্রথম অক্ষর সিলেক্ট করা
➡️ first-line - এলিমেন্টের প্রথম লাইন সিলেক্ট করা
➡️ first-child - প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ last-child - প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ first-of-type - একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করা
➡️ last-of-type - একই ধরনের শেষ এলিমেন্ট সিলেক্ট করা
➡️ nth-child - নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ only-child - একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করা
➡️ select-element-descendant - এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করা
➡️ > - এলিমেন্টের প্যারেন্ট সিলেক্ট করা
➡️ + - এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করা
➡️ ~ - এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করা
➡️ select-all-element-attribute - নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-value - নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-value-contain - অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-start-value - নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-end-value - নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করা
➡️ select-element-attribute-match-substring-value - অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করা

select-all-element - সকল এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
* {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

select-element - নির্দিষ্ট এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: tomato;
}

p {
  color: orange;
}
</style>
</head>
<body>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

select-element-group - একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1, p {
  color: red;
}
</style>
</head>
<body>

<div>
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

odd - বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(odd) {
  background-color: tomato;
}

li:nth-of-type(even) {
  background-color: orange;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

even - জোড় অবস্থানের এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(odd) {
  background-color: tomato;
}

li:nth-of-type(even) {
  background-color: orange;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

select-id - নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
#list {
  background-color: tomato;
}
</style>
</head>
<body>

<ul id="list">
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

select-class - নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  background-color: tomato;
}
</style>
</head>
<body>

<div class="container">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

</body>
</html>

select-attribute-group - নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
#list, .container {
  background-color: tomato;
}
</style>
</head>
<body>

<div class="container">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<br>

<ul id="list">
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

first-letter - এলিমেন্টের প্রথম অক্ষর সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
h1::first-letter {
  color: tomato;
}
</style>
</head>
<body>

<h1>সিএসএস</h1>

</body>
</html>

first-line - এলিমেন্টের প্রথম লাইন সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: tomato;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখুন<br> প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

</body>
</html>

first-child - প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:first-child {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

last-child - প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:last-child {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

first-of-type - একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:first-of-type {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

last-of-type - একই ধরনের শেষ এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:last-of-type {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

nth-child - নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(2) {
  color: red;
}
</style>
</head>
<body>

<ul>
  <li>পিএইচপি</li>
  <li>জাভা</li>
  <li>পাইথন</li>
  <li>জাভাস্ক্রিপ্ট</li>
</ul>

</body>
</html>

only-child - একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
div p:only-child {
  color: coral;
}
</style>
</head>
<body>

<div>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <p>ক্যাসকেডিং স্টাইল শিট</p>
</div>

</body>
</html>

select-element-descendant - এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
div p:only-child {
  color: coral;
}
</style>
</head>
<body>

<div>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
  <p>ক্যাসকেডিং স্টাইল শিট</p>
</div>

</body>
</html>

select-element-parent - এলিমেন্টের প্যারেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background: coral;
}
</style>
</head>
<body>

<div>
  <p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>

  <section>
    <p>ক্যাসকেডিং স্টাইল শিট</p>
  </section>
<div>

</body>
</html>

select-element-sibling - এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  color: coral;

}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</div>
<p>হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-general-sibling - এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  color: coral;

}
</style>
</head>
<body>

<div>প্রোগ্রামিং শিখুন</div>

<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<span>সিএসএস</span>
<p>সিএসএস টিউটোরিয়াল</p>
<p>ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-all-element-attribute - নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class] {
  color: red;
}
</style>
</head>
<body>

<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="para">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-attribute-value - নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class=desc] {
  color: red;
}
</style>
</head>
<body>

<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-attribute-value-contain - অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class~=head] {
  color: red;
}
</style>
</head>
<body>

<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-attribute-start-value - নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class^='de'] {
  color: red;
}
</style>
</head>
<body>

<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-attribute-end-value - নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class$='sc'] {
  color: red;
}
</style>
</head>
<body>

<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

select-element-attribute-match-substring-value - অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করার উদাহরণ।

css

<!DOCTYPE html>
<html>
<head>
<style>
p[class*='e'] {
  color: red;
}
</style>
</head>
<body>

<p class="head">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
<p class="desc">হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ</p>
<p class="desc">ক্যাসকেডিং স্টাইল শিট</p>

</body>
</html>

সিএসএস সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
*	সকল এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
element	নির্দিষ্ট এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
element, element	একাধিক এলিমেন্টের গ্রুপ সিলেক্ট করতে ব্যবহৃত হয়।
odd	বিজোড় অবস্থানের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
even	জোড় অবস্থানের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
#id	নির্দিষ্ট আইডির এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
.class	নির্দিষ্ট ক্লাসের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-attribute-group	নির্দিষ্ট অ্যাট্রিবিউটের এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
first-letter	এলিমেন্টের প্রথম অক্ষর সিলেক্ট করতে ব্যবহৃত হয়।
first-line	এলিমেন্টের প্রথম লাইন সিলেক্ট করতে ব্যবহৃত হয়।
first-child	প্যারেন্টের প্রথম চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
last-child	প্যারেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
first-of-type	একই ধরনের প্রথম এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
last-of-type	একই ধরনের শেষ এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
nth-child	নির্দিষ্ট অবস্থানের চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
only-child	একমাত্র চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-descendant	এলিমেন্টের বংশধর এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
>	এলিমেন্টের প্যারেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
+	এলিমেন্টের পরবর্তী সিবলিং সিলেক্ট করতে ব্যবহৃত হয়।
~	এলিমেন্টের পরবর্তী সব সিবলিং সিলেক্ট করতে ব্যবহৃত হয়।
select-all-element-attribute	নির্দিষ্ট অ্যাট্রিবিউটযুক্ত সকল এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-value	নির্দিষ্ট অ্যাট্রিবিউটের নির্দিষ্ট মানযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-value-contain	অ্যাট্রিবিউটের মানে নির্দিষ্ট শব্দ থাকা এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-start-value	নির্দিষ্ট মান দিয়ে শুরু হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-end-value	নির্দিষ্ট মান দিয়ে শেষ হওয়া অ্যাট্রিবিউটযুক্ত এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
select-element-attribute-match-substring-value	অ্যাট্রিবিউটের মানের নির্দিষ্ট অংশের সাথে মিলে যাওয়া এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।