CSS में एट्रिब्यूट सिलेक्टर्स का उपयोग करके विशेष एट्रिब्यूट्स वाले HTML एलिमेंट्स पर स्टाइल्स लागू करें। एट्रिब्यूट सिलेक्टर पर निम्न नियम लागू होते हैं।
p[lang] − lang एट्रिब्यूट वाले सभी पैराग्राफ एलिमेंट्स सिलेक्ट करता है।
p[lang="fr"] − उन सभी पैराग्राफ एलिमेंट्स को सिलेक्ट करता है जिनका lang एट्रिब्यूट मान exactly "fr" है।
p[lang~="fr"] − उन सभी पैराग्राफ एलिमेंट्स को सिलेक्ट करता है जिनका lang एट्रिब्यूट शब्द "fr" रखता है।
p[lang|="en"] − उन सभी पैराग्राफ एलिमेंट्स को सिलेक्ट करता है जिनका lang एट्रिब्यूट मान exactly "en" है, या "en-" से शुरू होता है।
CSS एट्रिब्यूट सिलेक्टर्स से फॉर्म्स स्टाइल करने का कोड निम्न है -
उदाहरण
<!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 attribute selector example</h1> <form> <label for="fname">First name:</label><br /> <input type="text" id="fname" name="fname" value="Ron" /> <label for="lname">Last name:</label><br /> <input type="text" id="lname" name="lname" value="Shaw" /> <label for="pass">Password:</label><br /> <input type="password" id="pass" name="pass" value="password" /> <input type="submit" value="Submit" /> </form> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
