অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে নির্দিষ্ট অ্যাট্রিবিউটযুক্ত এলিমেন্ট (যেমন `input[type="text"]`) টার্গেট করে স্টাইল করা যায়।
অ্যাট্রিবিউট সিলেক্টর রুলস
- p[lang] — lang অ্যাট্রিবিউটযুক্ত সব p এলিমেন্ট
- p[lang="fr"] — lang="fr" Exact match
- p[lang~="fr"] — lang এ fr শব্দ আছে (space-separated)
- p[lang|="en"] — lang=en বা en- দিয়ে শুরু হয়
উদাহরণ: ফর্ম স্টাইলিং
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
input[type="text"] { width: 300px; display: block; margin-bottom: 10px; background-color: rgb(195, 250, 247); font-size: 18px; padding: 15px; border: none; }
input[type="submit"] { padding: 10px; font-size: 18px; border: none; outline: none; background-color: rgb(75, 163, 16); color: white; }
input[type="password"] { width: 300px; padding: 10px; background-color: red; color: white; border: none; }
</style>
</head>
<body>
<h1>CSS অ্যাট্রিবিউট সিলেক্টর উদাহরণ</h1>
<form>
<label for="fname">প্রথম নাম:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">শেষ নাম:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">পাসওয়ার্ড:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="জমা দিন" />
</form>
</body>
</html>
কোড ব্যাখ্যা
- input[type="text"]: শুধু টেক্সট ইনপুট স্টাইল।
- input[type="submit"]: সাবমিট বাটন স্টাইল।
- input[type="password"]: পাসওয়ার্ড ফিল্ড স্টাইল।
অন্য ব্যবহারী সিলেক্টর
`input[required]`, `input[disabled]`, `a[href^="https"]`, `a[href$=".pdf"]`, `a[href*="github"]` ইত্যাদি।
