CSS :focus-within সিউডো ক্লাস

যদি আমরা একটি ফোকাস করা এলিমেন্টের পেরেন্টকে স্টাইল করতে চাই, তবে CSS :focus-within সিউডো-ক্লাস ব্যবহার করি।

নিচের উদাহরণগুলো CSS :focus-within সিউডো-ক্লাস প্রদর্শন করে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> form {    margin: 2%;    padding: 2%;    display: flex;    flex-direction: column;    background: thistle; } input {    margin: 2%; } form:focus-within {    background-color: burlywood;    box-shadow: 0 0 12px rgba(0,0,0,0.6) } input:focus {    box-shadow: 0 0 12px rgba(0,0,0,0.6) } </style> </head> <body> <form> <input type="text" placeholder="name"/> <input type="email" placeholder="email"/> </form> </body> </html>

আউটপুট

এটি নিচের ফলাফল দেবে −

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div {    width: 40%;    margin: 2%;    padding: 2%;    display: flex;    flex-direction: column;    background: lavenderblush; } div > * {    margin: 2%; } div:focus-within {    background-color: aliceblue;    box-shadow: 0 0 12px rgba(0,0,0,0.6) } </style> </head> <body> <div> <textarea></textarea> <button>Click</button> </div> </body> </html>

আউটপুট

এটি নিচের ফলাফল দেবে −