CSS :lang() स्यूडो-क्लास सेलेक्टर का उपयोग उन एलिमेंट्स को चुनने के लिए किया जाता है जिनमें lang एट्रिब्यूट निर्दिष्ट होता है। यह हमें कंटेंट से जुड़ी एक विशिष्ट भाषा को टार्गेट करने और उन्हें तदनुसार स्टाइल करने में मदद करता है।
सिंटैक्स
निम्नलिखित सिंटैक्स है:
:lang(){ /*declarations*/ }
आइए CSS :lang() स्यूडो-क्लास सेलेक्टर का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> p:lang(it)::after { padding: 20px; content: '~ Italian'; font-style: italic; } p:lang(es)::after { padding: 8px; content: '~ Spanish'; font-style: italic; } p:lang(en)::after { padding: 20px; content: '~ English'; font-style: italic; } </style> </head> <body> <p lang='it'>Bella ciao</p> <p lang='en'>Nice hello</p> <p lang='es'>Bueno adios</p> </body> </html>
आउटपुट
आइए CSS :lang() स्यूडो-क्लास सेलेक्टर का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> div{ margin: 10px; padding: 10px; text-align: center; border: 1px solid black; } div:lang(it)::after { padding: 20px; content: '~ Italy'; font-style: italic; } div:lang(es)::after { padding: 8px; content: '~ Spain'; font-style: italic; } div:lang(nl)::after { padding: 20px; content: '~ Belgium'; font-style: italic; } div:lang(es){ background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%); } div:lang(it){ background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%); } div:lang(nl){ background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%); } </style> </head> <body> <div lang='it'>Rome</div> <div lang='nl'>Brussels</div> <div lang='es'>Madrid</div> </body> </html>
आउटपुट
