सीएसएस विशिष्टता
विशिष्टता क्या है?
यदि दो या दो से अधिक सीएसएस नियम हैं जो एक ही तत्व को इंगित करते हैं, तो उच्चतम विशिष्टता मान वाला चयनकर्ता "जीत" जाएगा, और इसकी शैली घोषणा उस HTML तत्व पर लागू होगी।
विशिष्टता को स्कोर/रैंक के रूप में सोचें जो निर्धारित करता है कि कौन सी शैली घोषणा अंततः किसी तत्व पर लागू होती है।
निम्नलिखित उदाहरण देखें:
उदाहरण 1
इस उदाहरण में, हमने चयनकर्ता के रूप में "p" तत्व का उपयोग किया है, और इस तत्व के लिए एक लाल रंग निर्दिष्ट किया है। पाठ लाल होगा:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
अब, उदाहरण 2 देखें:
उदाहरण 2
इस उदाहरण में, हमने एक वर्ग चयनकर्ता ("परीक्षण" नाम दिया है) जोड़ा है, और इस वर्ग के लिए एक हरा रंग निर्दिष्ट किया है। पाठ अब हरा होगा (भले ही हमने तत्व चयनकर्ता "पी" के लिए लाल रंग निर्दिष्ट किया है। ऐसा इसलिए है क्योंकि वर्ग चयनकर्ता को उच्च प्राथमिकता दी जाती है:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
अब, उदाहरण 3 देखें:
उदाहरण 3
इस उदाहरण में, हमने आईडी चयनकर्ता ("डेमो" नाम दिया है) जोड़ा है। टेक्स्ट अब नीला होगा, क्योंकि आईडी चयनकर्ता को उच्च प्राथमिकता दी जाती है:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
अब, उदाहरण 4 को देखें:
उदाहरण 4
इस उदाहरण में, हमने "p" तत्व के लिए एक इनलाइन शैली जोड़ी है। टेक्स्ट अब गुलाबी होगा, क्योंकि इनलाइन शैली को सर्वोच्च प्राथमिकता दी जाती है:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
विशिष्टता पदानुक्रम
विशिष्टता पदानुक्रम में प्रत्येक CSS चयनकर्ता का अपना स्थान होता है।
चार श्रेणियां हैं जो चयनकर्ता के विशिष्टता स्तर को परिभाषित करती हैं:
- इनलाइन शैलियाँ - उदाहरण: <h1 शैली="रंग: गुलाबी;">
- आईडी - उदाहरण: #navbar
- कक्षाएं, छद्म वर्ग, विशेषता चयनकर्ता - उदाहरण: .test, :hover, [href]
- तत्व और छद्म तत्व - उदाहरण: h1, :before
विशिष्टता की गणना कैसे करें?
याद रखें कि विशिष्टता की गणना कैसे करें!
0 से शुरू करें, प्रत्येक आईडी मान के लिए 100 जोड़ें, प्रत्येक वर्ग मान (या छद्म वर्ग या विशेषता चयनकर्ता) के लिए 10 जोड़ें, प्रत्येक तत्व चयनकर्ता या छद्म तत्व के लिए 1 जोड़ें।
नोट: इनलाइन शैली को 1000 का विशिष्टता मान मिलता है, और इसे हमेशा सर्वोच्च प्राथमिकता दी जाती है!
नोट 2: इस नियम का एक अपवाद है: यदि आप !important
नियम का उपयोग करते हैं, तो यह इनलाइन शैलियों को भी ओवरराइड कर देगा!
नीचे दी गई तालिका विशिष्टता मानों की गणना करने के तरीके के बारे में कुछ उदाहरण दिखाती है:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
उच्चतम विशिष्टता मान वाला चयनकर्ता जीतेगा और प्रभावी होगा!
इन तीन कोड अंशों पर विचार करें:
उदाहरण
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
ए की विशिष्टता 1 है (एक तत्व चयनकर्ता)
बी की विशिष्टता 101 है (एक आईडी संदर्भ + एक तत्व चयनकर्ता)
सी की विशिष्टता 1000 है (इनलाइन स्टाइलिंग)
चूंकि तीसरे नियम (सी) में उच्चतम विशिष्टता मूल्य (1000) है, इसलिए यह शैली घोषणा लागू की जाएगी।
अधिक विशिष्टता नियम उदाहरण
समान विशिष्टता: नवीनतम नियम जीतता है - यदि एक ही नियम को बाहरी स्टाइल शीट में दो बार लिखा जाता है, तो नवीनतम नियम जीतता है:
उदाहरण
h1 {background-color: yellow;}
h1 {background-color: red;}
आईडी चयनकर्ताओं की विशेषता चयनकर्ताओं की तुलना में अधिक विशिष्टता होती है - निम्नलिखित तीन कोड पंक्तियों को देखें:
उदाहरण
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
पहला नियम अन्य दो की तुलना में अधिक विशिष्ट है, और इसलिए इसे लागू किया जाएगा।
प्रासंगिक चयनकर्ता एकल तत्व चयनकर्ता की तुलना में अधिक विशिष्ट होते हैं - एम्बेडेड स्टाइल शीट स्टाइल किए जाने वाले तत्व के करीब होती है। तो निम्नलिखित स्थिति में
उदाहरण
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
बाद वाला नियम लागू होगा।
एक वर्ग चयनकर्ता किसी भी संख्या में तत्व चयनकर्ताओं को मात देता है - एक वर्ग चयनकर्ता जैसे .intro h1, p, div, आदि को हराता है:
उदाहरण
.intro {background-color: yellow;}
h1 {background-color:
red;}
यूनिवर्सल सेलेक्टर (*) और इनहेरिट किए गए मानों में 0 की विशिष्टता होती है - यूनिवर्सल सिलेक्टर (*) और इनहेरिट किए गए मानों को नज़रअंदाज कर दिया जाता है!