CSS-এ উন্নত উপাদান নির্বাচন- কৌশল এবং উদাহরণ

ছদ্ম-শ্রেণী

ছদ্ম-শ্রেণী আপনাকে একটি উপাদানের নির্দিষ্ট অবস্থা বা অবস্থান নির্বাচন করতে দেয়। উদাহরণস্বরূপ, :hover যখন মাউস পয়েন্টার থাকে তখন উপাদানটি নির্বাচন করে, :focus যখন এটি নির্বাচন করা হয় বা ফোকাস থাকে তখন উপাদানটি নির্বাচন করে, :nth-child() একটি গ্রুপে একটি নির্দিষ্ট শিশু উপাদান নির্বাচন করে।

উদাহরণ:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

ছদ্ম-উপাদান

ছদ্ম-উপাদান আপনাকে একটি বিদ্যমান উপাদান কাস্টমাইজ করার জন্য ভার্চুয়াল উপাদান তৈরি করতে দেয়।

উদাহরণস্বরূপ, ::before এবং ::after একটি উপাদানের আগে এবং পরে উপাদান তৈরি করুন ::first-line এবং ::first-letter একটি উপাদানের প্রথম লাইন এবং প্রথম অক্ষর নির্বাচন করুন।

উদাহরণ:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

কম্বিনেটর

সমন্বয়কারীরা আপনাকে নির্বাচকদের তাদের সম্পর্কের উপর ভিত্তি করে উপাদান নির্বাচন করতে একত্রিত করতে দেয়। উদাহরণস্বরূপ, ভিতরে element1 element2 নির্বাচন করে, এর সরাসরি চাইল্ড উপাদান নির্বাচন করে, অবিলম্বে নির্বাচন করে । element2 element1 element1 > element2 element1 element1 + element2 element2 element1

উদাহরণ:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

বৈশিষ্ট্য নির্বাচক

বৈশিষ্ট্য নির্বাচকরা আপনাকে তাদের বৈশিষ্ট্যের মানের উপর ভিত্তি করে উপাদান নির্বাচন করতে দেয়। উদাহরণ স্বরূপ, [attribute] অ্যাট্রিবিউট সহ উপাদান নির্বাচন করে attribute, এর সমান [attribute=value] অ্যাট্রিবিউট সহ উপাদান নির্বাচন করে, এট্রিবিউট দিয়ে শুরু করে উপাদান নির্বাচন করে । attribute value [attribute^=value] attribute value

উদাহরণ:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

:not() নির্বাচক

নির্বাচক আপনাকে এমন উপাদান নির্বাচন করতে দেয় যা একটি নির্দিষ্ট নির্বাচকের সাথে মেলে না। উদাহরণস্বরূপ, ক্লাস নেই এমন উপাদান নির্বাচন করে, আইডি নেই এমন উপাদান নির্বাচন করে । :not() :not(.class) class :not(#id) id

উদাহরণ:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

এই উদাহরণগুলি CSS-এ উন্নত উপাদান নির্বাচন প্রদর্শন করে। আপনি কাস্টমাইজ এবং পছন্দসই আপনার ওয়েব পৃষ্ঠার উপাদান শৈলী এবং কাস্টমাইজ করতে এই কৌশল প্রয়োগ করতে পারেন.