Post No:18
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা CSS Seclector সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
CSS selector:
একটি সিএসএস নির্বাচক (css selector) একটি সিএসএস শাসনের প্রথম অংশ। এটি উপাদানগুলির একটি প্যাটার্ন এবং অন্যান্য শর্তাবলী যা ব্রাউজারটিকে বলে যে HTML উপাদানগুলি সিএসএসের সম্পত্তি মানগুলি তাদের প্রয়োগের জন্য প্রয়োগ করা উচিত।
সিএসএস নির্বাচকরা (css selector) তার আইডি, ক্লাস, টাইপ, গুণাবলী ইত্যাদি অনুযায়ী HTML উপাদানগুলি নির্বাচন করুন।
সিএসএসের বিভিন্ন ধরনের নির্বাচক রয়েছে।
Tag Selector
ID Selector
Class Selector
Nested Selector
Child Selector
Pseudo Selector
1. Tag Selector:
একটি এইচটিএমএল নির্বাচক একটি এইচটিএমএল ট্যাগ এর টেক্সট অংশ। উদাহরণস্বরূপ, H3 <H3> ট্যাগের জন্য নির্বাচক। সমস্ত এইচটিএমএল ট্যাগ ডিফল্ট বৈশিষ্ট্য আছে। এইচটিএমএল নির্বাচক তার নির্দিষ্ট এইচটিএমএল ট্যাগের আচরণ নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। HTML ট্যাগের আচরণ পরিবর্তন করতে, কেবল নির্বাচক এর বৈশিষ্ট্যগুলি পরিবর্তন বা পুনরায় সংজ্ঞায়িত করুন। সিএসএসে ট্যাগকে সরাসরি ট্যাগ হিসেবে সম্মোদন করা হয়
h1{
text-align: center;
color: red;
}
h2{
text-align: center;
color: red;
}
h3{
text-align: center;
color: red;
}
p{
text-align: center;
color: red;}
2. ID Selector:
ID Selector একটি নির্দিষ্ট উপাদান নির্বাচন করতে একটি HTML উপাদান আইডি বৈশিষ্ট্য নির্বাচন করে। একটি আইডি পৃষ্ঠার মধ্যে সর্বদা অনন্য, তাই এটি একটি একক, অনন্য উপাদান নির্বাচন করতে নির্বাচিত হয়। এটি হ্যাশ ক্যারেক্টার (#) এর সাথে লেখা আছে, যা এলিমেন্টের আইডি অনুসরণ করে।
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo of the #id selector</h1>
<div class="intro">
<p id="firstname">My name is Donald</p>
<p id="hometown">I live in duckbarg</p>
<p>My best friend is Micky</p>
</div>
</body>
</html>
Output:
3. Class Selector:
.Class নির্বাচক একটি নির্দিষ্ট ক্লাস বৈশিষ্ট্য সঙ্গে উপাদান নির্বাচন করে।
একটি নির্দিষ্ট শ্রেণীর সাথে উপাদানগুলি নির্বাচন করতে, একটি নির্দিষ্ট সময়ের (.) character টি লিখুন, এর পরে শ্রেণীর নাম অনুসরণ করুন।
আপনি শুধুমাত্র নির্দিষ্ট HTML উপাদানগুলি একটি শ্রেণীর দ্বারা প্রভাবিত হওয়া উচিত তা নির্দিষ্ট করতে পারেন। এটি করার জন্য, উপাদানটির সাথে শুরু করুন, তারপরে সময়ের (.) character টি লিখুন, অনুসরণ করুন শ্রেণীর নামের দ্বারা অনুসরণ করুন
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
<style>
p.center{
text-align: center;
color: red;
}
p.large{
font-size: 300%;
}
</style>
</head>
<body>
<h1>Demo of the .class selector</h1>
<h1 class="center">this heading will not be affected</>
<p class="center">this paragraphe will be red and center aligned .</p>
<p class="center lager">this paragraphe will be red,center-aligned,and lager font size</p>
</body>
</html>
Output:
4. Nested Selector:
সাধারণত এইচটিএমএল একটি পরিষ্কার Nested এবং visual hierarchy
এর মধ্যে লেখা হয় যখন সিএসএস হয় না। SASS আপনাকে আপনার CSS Selector কে এমন একটি উপায়ে ঘুরে বেড়ায় যা আপনার HTML এর একই visual hierarchy অনুসরণ করে। Nesteding এর সময় আপনার খুব সতর্কতা অবলম্বন করা উচিত কারণ অত্যধিক নিস্তেজ নিয়ম জটিলতা সৃষ্টি করতে পারে এবং এটি বজায় রাখার জন্য কঠোর প্রমাণিত হয়।
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
}
nav a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
5. Child Selector:
Child Selector একটি নির্দিষ্ট উপাদান শিশুদের যে সব উপাদান নির্বাচন করে। নিচে Child Selector গুলো দেয়া হলঃ
- first-child
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
<style>
p.center{
text-align: center;
color: red;
}
p:first-child{
background-color: yellow;
}
</style>
</head>
<body>
<p>this is paragraphe is the first child of its parent
(body).
</p>
<p>this is paragraphe is not the first child of its parent
(body).
</p>
<div>
<p>this is paragraphe is the first child of its parent
(div).
</p>
<p>this is paragraphe is not the first child of its parent
(div).
</p>
</div>
</body>
</html>
Output:
- last-child
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
<style>
p.center{
text-align: center;
color: red;
}
p:last-child{
background-color: yellow;
}
</style>
</head>
<body>
<p>the first paragraphe</p>
<p>the second paragraphe</p>
<p>the third paragraphe</p>
<p>the fourth paragraphe</p>
</body>
</html>
Output:
- nth-last-child()
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
<style>
p.center{
text-align: center;
color: red;
}
p:nth-last-child{
background-color: green;
}
</style>
</head>
<body>
<p>the first paragraphe</p>
<p>the second paragraphe</p>
<p>the third paragraphe</p>
<p>the fourth paragraphe</p>
</body>
</html>
Output:
6. Pseudo Selector:
একটি Pseudo class একটি উপাদান একটি বিশেষ রাষ্ট্র সংজ্ঞায়িত করতে ব্যবহৃত হয়।
উদাহরণস্বরূপ, এটি ব্যবহার করা যেতে পারে: একটি ব্যবহারকারী এটি উপর mouses যখন ওই উপাদানের উপর নিয়ে যায় এবং unvisited লিঙ্ক ভিন্নভাবে এটি ফোকাস পায় যখন একটি উপাদান পরিদর্শন হয়।
আমরা এই ব্লগ এর মধ্য আজ Css Selector নিয়ে জানলাম।