CSS :has() 伪类

定义和用法

CSS :has() 伪类用于匹配具有特定兄弟元素或内部包含特定元素的任何父元素。

উদাহরণ দিয়ে দেখা:

• বিশেষ ভাইথার ইঞ্জেকশন বা অভ্যন্তরীণ কনটেন্ট ভিত্তিতে ইঞ্জেকশনকে লুকানো বা দেখানো
• যদি একটি বিশেষ কনটেন্ট রয়েছে, তবে লেআউটকে পরিবর্তন করুন
• যদি পিতৃ ইঞ্জেকশন একটি বিশেষ ভাইথার ইঞ্জেকশন বা অভ্যন্তরীণ কনটেন্ট হয়, তবে তার অভিমুখকে ভিন্ন করুন

প্রতিদর্শ

উদাহরণ 1

সেট করুন <p> ইঞ্জেকশন পরের <h2> ইঞ্জেকশনের স্টাইল:

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

আপনার নিজের কাজ করুন

উদাহরণ 2

সেট করুন <h1> ইঞ্জেকশনকে সমর্থন করে <section> ইঞ্জেকশনের স্টাইল, এবং .funfact নামক ক্লাসকে সমর্থন করে <section> ইঞ্জেকশনের স্টাইল সেট করুন:

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

আপনার নিজের কাজ করুন

উদাহরণ 3

সেট করুন বৃদ্ধির মধ্যে চিহ্নিত <input> ইঞ্জেকশনকে সমর্থন করে <li> ইঞ্জেকশনের স্টাইল (যা <ul> এর মধ্যে রয়েছে):

ul li:has(input:checked) {
  border:2px solid maroon;
}

আপনার নিজের কাজ করুন

CSS য়াক্স

:has(relative-selector-list) {
  css declarations;
}

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই প্রকৃত প্রদত্তকার প্রথম ব্রাউজার সংস্করণকে সম্পূর্ণরূপে সমর্থন করে।