CSS [attribute~="value"] সিলেক্টর দিয়ে নির্দিষ্ট শব্দ ধারণকারী এলিমেন্ট সিলেক্ট করা

[attribute~="value"] সিলেক্টরটি ব্যবহার করে যেসব এলিমেন্টের অ্যাট্রিবিউট ভ্যালুতে স্পেস দিয়ে পৃথক একটি নির্দিষ্ট শব্দ থাকে, সেগুলো বাছাই করা যায়। এটি ক্লাস অ্যাট্রিবিউটের মতো স্পেস-সেপারেটেড ভ্যালুর জন্য আদর্শ।

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      [alt~="Tutorials"] {
        border: 5px solid orange;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <img src="..." height="200" width="200" alt="Tutor Connect">
    <img src="..." height="200" width="200" alt="Tutorials Library">
  </body>
</html>

এখানে শুধু দ্বিতীয় ছবিটি সিলেক্ট হবে, কারণ এর alt ভ্যালুতে "Tutorials" শব্দটি আলাদা শব্দ হিসেবে আছে।