सीएसएस विशेषता चयनकर्ता

CSS चयनकर्ता वेब डेवलपर्स को वेब पेज पर किसी विशेष तत्व या तत्वों के सेट पर शैलियों को लागू करने की अनुमति देते हैं।

चयनकर्ताओं के साथ काम करते समय, आप यह तय कर सकते हैं कि आप केवल एक विशेष विशेषता वाले तत्वों को लक्षित करना चाहते हैं। यहीं पर CSS विशेषता चयनकर्ता आता है। विशेषता चयनकर्ता आपको कुछ शैलियों को केवल एक विशिष्ट विशेषता वाले तत्वों पर लागू करने में मदद करता है।

यह ट्यूटोरियल चर्चा करेगा कि तत्वों को स्टाइल करते समय CSS विशेषता चयनकर्ता का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप शैली तत्वों के लिए विशेषता चयनकर्ता का उपयोग करने के विशेषज्ञ होंगे।

एचटीएमएल विशेषताएं

HTML में, किसी तत्व की अतिरिक्त विशेषताओं या गुणों को परिभाषित करने के लिए विशेषताओं का उपयोग किया जाता है। उदाहरण के लिए, ऊंचाई विशेषता एक छवि की ऊंचाई निर्धारित करती है, और शीर्षक विशेषता एक वेब तत्व का शीर्षक निर्धारित करती है।

आप नाम/मूल्य जोड़ी संरचना का उपयोग करके विशेषताओं की घोषणा करते हैं। इसका मतलब है कि, HTML फ़ाइल में, एक विशेषता इस तरह दिखाई देगी: name=“value” . HTML में विशेषताओं के बारे में अधिक जानने के लिए, HTML विशेषताओं के लिए हमारी मार्गदर्शिका पढ़ें।

CSS विशेषता चयनकर्ता

जब आप कोई साइट डिज़ाइन कर रहे हों, तो हो सकता है कि आप इस आधार पर तत्वों पर शैली लागू करना चाहें कि उन तत्वों का कोई विशेष विशेषता मान है या नहीं। ऐसा करने के लिए आप CSS विशेषता चयनकर्ता का उपयोग करते हैं।

विशेषता चयनकर्ता का उपयोग करते समय आप दो कदम उठाएंगे:

वर्ग कोष्ठक में विशेषता का नाम संलग्न करें।
उन शैलियों को निर्दिष्ट करें जिन्हें आप उस नाम के साथ विशेषताओं पर लागू करना चाहते हैं।

आइए कार्रवाई में CSS विशेषता चयनकर्ता के कुछ उदाहरण देखें।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

सीएसएस [विशेषता]

विशेषता चयनकर्ता का सबसे बुनियादी रूप है:[attribute] . सीधे शब्दों में कहें, तो आप वर्ग कोष्ठक में एक विशेषता का नाम संलग्न करते हैं।

मान लीजिए कि हम प्रत्येक तत्व के फ़ॉन्ट आकार को एक शीर्षक विशेषता के साथ 16px पर सेट करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

[title] {
	font-size: 16px;
}

हमारे सीएसएस नियम में कोड केवल शीर्षक विशेषता वाले तत्वों पर लागू होगा। निर्दिष्ट शीर्षक विशेषता वाले किसी भी तत्व का फ़ॉन्ट आकार—इससे कोई फ़र्क नहीं पड़ता कि वह विशेषता किस मूल्य को संग्रहीत करती है—उपरोक्त नियम के अनुसार 16px में बदल जाएगी।

आप निम्न में से एक या दोनों को निर्दिष्ट करके अपने विशेषता चयनकर्ता को अधिक सटीक बना सकते हैं:

विशेष तत्व प्रकार जिस पर एक नियम लागू होना चाहिए
इसकी विशेषता आईडी मान (जैसे टेक्स्ट के लिए "शीर्षक", किसी लिंक के लिए "href", या किसी भी तत्व के लिए "वर्ग")।

उदाहरण के लिए, मान लें कि आप सभी पैराग्राफ हेडर टेक्स्ट का आकार 16 px पर सेट करना चाहते हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

[title] {
	font-size: 16px;
}

अक्षर p विशेषता के प्रारंभ में चयनकर्ता ब्राउज़र को केवल <p> . पर फ़ॉन्ट शैली लागू करने के लिए कहता है टैग। [title] चयनकर्ता का एक हिस्सा ब्राउज़र को केवल

टैग पर title के साथ फ़ॉन्ट शैली लागू करने का निर्देश देता है विशेषता निर्दिष्ट।

इसलिए, इस कोड को पढ़ने के बाद, ब्राउज़र सभी पैराग्राफ (पी) शीर्षकों के फ़ॉन्ट आकार को 16 पीएक्स में बदल देगा। यह कोड पृष्ठ पर किसी अन्य पाठ को प्रभावित नहीं करेगा।

सीएसएस [विशेषता=“मान”]

[attribute=“value”] विशेषता चयनकर्ता कोडर को केवल उन तत्वों पर शैलियों को लागू करने में सक्षम बनाता है जिनके विशेषता मान चयनकर्ता में निर्दिष्ट मान के बराबर हैं।

मान लीजिए कि हम करियर कर्म होमपेज के सभी लिंक की पृष्ठभूमि का रंग नारंगी पर सेट करना चाहते हैं। इस शैली को a . की पृष्ठभूमि का रंग सेट करना चाहिए नारंगी के लिए तत्व। हम निम्नलिखित CSS कोड का उपयोग करके यह क्रिया कर सकते हैं:

a[href="careerkarma.com"] {
	background-color: orange;
}

यह नियम आपके वेब पेज के सभी तत्वों का चयन करता है जिनकी href विशेषता careerkarma.com के बराबर है . फिर, यह उन सभी तत्वों की पृष्ठभूमि का रंग नारंगी पर सेट करता है।

सीएसएस [विशेषता~=“मान”]

[attribute~=“value”] चयनकर्ता आपको उन विशेषता मानों वाले तत्वों का चयन करने की अनुमति देता है जिनमें एक विशिष्ट शब्द होता है।

उदाहरण के लिए, मान लें कि आप सभी p . पर एक शैली लागू करना चाहते हैं blue . शब्द से मेल खाने वाले शीर्षक वाले तत्व . इस शैली के लिए, इन तत्वों के पाठ का रंग बदलकर नीला कर देना चाहिए।

हम इस कार्य को पूरा करने के लिए निम्नलिखित नियम का उपयोग कर सकते हैं:

p[title~="blue"] {
	color: blue;
}

यह नियम "नीला" शब्द वाले शीर्षकों से जुड़े सभी

टैग ढूंढेगा और उन

टैग के भीतर टेक्स्ट के टेक्स्ट का रंग नीला कर देगा। इसलिए, यदि किसी

टैग का शीर्षक blue color . है या color blue , यह शैली लागू होगी। हालांकि, यह नियम नहीं होगा blueColor शीर्षक वाले

टैग पर लागू करें क्योंकि शब्द blue विशेषता के भीतर स्वतंत्र रूप से मौजूद नहीं है।

यह *= selector . से भिन्न है , जो न केवल एक विशेषता में एक विशिष्ट शब्द ढूंढ सकता है, बल्कि एक विशेषता में एक विशिष्ट मान भी ढूंढ सकता है।

सीएसएस [विशेषता|=“मान”]

[attribute|=“value”] चयनकर्ता आपको उन विशेषताओं वाले तत्वों का चयन करने की अनुमति देता है जो एक निर्दिष्ट मान से शुरू होते हैं (उदाहरण के लिए, "शीर्ष")। इसमें विशेषताओं वाले तत्व शामिल हैं जो निर्दिष्ट मान से शुरू होते हैं और इसमें एक हाइफ़न होता है जिसके बाद अतिरिक्त टेक्स्ट होता है (उदाहरण के लिए, "शीर्ष-शैली" और अन्य "शीर्ष-" मान)। ध्यान दें कि कोड "वर्ग" शब्द के बाद एक लंबवत बार (|) के लिए कॉल करता है।

उदाहरण के लिए, मान लें कि आप प्रत्येक <div> . को 10px शीर्ष पैडिंग असाइन करना चाहते हैं एक वर्ग विशेषता वाला तत्व जो top . से शुरू होता है , जिसमें वे शामिल हैं जिनके बाद अन्य हाइफ़न-पृथक मान हैं। आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

div[class|="top"] {
	padding-top: 10px;
}

यह नियम प्रत्येक

तत्व के शीर्ष पर 10px पैडिंग लागू करेगा जिसका वर्ग नाम top से शुरू होता है , जिसमें वर्ग नाम वाले तत्व शामिल हैं जो top- . से शुरू होते हैं .

यह नोट करना महत्वपूर्ण है कि आपके द्वारा निर्दिष्ट मान या तो एक संपूर्ण शब्द होना चाहिए या एक शब्द जिसके बाद एक हाइफ़न होना चाहिए। दूसरे शब्दों में, हमारी उपरोक्त शैली

वर्ग नामों वाले तत्वों पर लागू होगी top style और top-style , लेकिन एक

तत्व के लिए नहीं जिसका वर्ग नाम topstyle . है .

सीएसएस [विशेषता^=“मान”]

[attribute^=“value”] चयनकर्ता का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिनकी विशेषता मान एक विशिष्ट मान से शुरू होती है। [attribute|=“value”] के विपरीत, आपके द्वारा निर्दिष्ट मान एक संपूर्ण शब्द नहीं होना चाहिए चयनकर्ता जिसकी हमने पहले चर्चा की थी।

मान लीजिए कि हम प्रत्येक

तत्व के लिए 10px निचला पैडिंग लागू करना चाहते हैं, जिसमें paddingBottom से शुरू होने वाली एक वर्ग विशेषता है। . हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

div[class^="paddingBottom"] {
	padding-bottom: 10px;
}

उपयोगकर्ता का वेब ब्राउज़र हमारे द्वारा परिभाषित सभी

टैग पर पैडिंग-बॉटम स्टाइल लागू करेगा जिनके वर्ग नाम "पैडिंगबॉटम" से शुरू होते हैं। इसलिए, यदि हमारे पास "पैडिंगबॉटम स्टाइल" नामक एक वर्ग है, तो यह शैली लागू होगी। उदाहरण के लिए, यह शैली "पैडिंगबॉटम" और "पैडिंगबॉटम-एलिमेंट" नामक कक्षाओं पर भी लागू होगी। लेकिन, यह "न्यू-पैडिंगबॉटम" नामक एक वर्ग पर लागू नहीं होगा, जो "पैडिंगबॉटम" से शुरू नहीं होता है।

सीएसएस [विशेषता$=“मान”]

$= operator उन सभी तत्वों का चयन करने के लिए उपयोग किया जाता है जिनके विशेषता मान किसी विशेष मान के साथ समाप्त होते हैं। उदाहरण के लिए, मान लें कि आप सभी हाइपरलिंक किए गए टेक्स्ट के टेक्स्ट रंग को ग्रे में बदलना चाहते हैं, जिसका href विशेषता मान .app में समाप्त होता है . आप इस कोड का उपयोग करके ऐसा कर सकते हैं:

a[href$=".app"] {
	color: gray;
}

यह चयनकर्ता आपके वेब पेज पर उन सभी तत्वों पर लागू होगा जिनके href मान .app में समाप्त होते हैं .

सीएसएस [विशेषता*=“मान”]

*= operator आपको उन सभी तत्वों का चयन करने की अनुमति देता है जिनके विशेषता मानों में एक विशेष मान होता है। ~= operator . के विपरीत , यह विशेषता चयनकर्ता केवल एक शब्द नहीं, बल्कि एक वर्ग में एक विशेष मान ढूंढ सकता है।

उदाहरण के लिए, मान लें कि आप सभी

टैग्स के चारों ओर 50px पैडिंग लागू करना चाहते हैं, जिनकी वर्ग विशेषताओं में allPadding शामिल हैं। . आप इस नियम का उपयोग करके ऐसा कर सकते हैं:

div[class*="allPadding"] {
	padding: 50px;
}

यह नियम allPadding शब्द वाले वर्ग विशेषताओं वाले सभी HTML तत्वों के चारों ओर एक 50px पैडिंग सेट करेगा . तो, वर्ग नाम वाले तत्व new allPadding , surround allPadding red , allPaddingblue और allPadding-true सभी इस शैली के अधीन होंगे।

निष्कर्ष

CSS विशेषता चयनकर्ता डेवलपर्स को उनके विशेषता मानों के आधार पर तत्वों का चयन करने और उन तत्वों के लिए विशिष्ट शैलियों को लागू करने की अनुमति देता है।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में, विशेषता चयनकर्ताओं की मूल बातें और सभी प्रकार के CSS विशेषता चयनकर्ता का उपयोग करने के तरीके पर चर्चा की गई। अब आप एक पेशेवर की तरह CSS विशेषता चयनकर्ता का उपयोग शुरू करने के लिए तैयार हैं।

सीएसएस वेब विकास में उपयोग किए जाने वाले तीन मुख्य कौशलों में से एक है। डाउनलोड करें मुफ्त करियर कर्म ऐप आज एक विशेषज्ञ करियर कोच से बात करने के लिए जो आपको एक वेब डेवलपर के रूप में करियर बनाने के लिए आवश्यक कौशल पर सलाह देने में मदद कर सकता है।