CSS चयनकर्ता

docs.scrimba.com

आपके पास तत्वों से भरा एक पृष्ठ है और शैलियों का एक समूह है जो आप लागू करना चाहते हैं, लेकिन एक रंग या फॉन्ट तब तक काम नहीं आता जब तक आप यह नहीं कह सकते कि यह किन तत्वों से संबंधित है। एक चयनकर्ता वह है जिससे आप सही लोगों की ओर इशारा करते हैं: यह पैराग्राफ, हर बटन, केवल नेव के अंदर के लिंक। चयनकर्ताओं के साथ सहज हो जाएं और CSS का बाकी हिस्सा बदलने के लिए चुनने का मामला बन जाता है, क्योंकि आप पहले से ही जानते हैं कि इसे कैसे प्राप्त करें।

प्रकार, वर्ग, और आईडी चयनकर्ता

एक CSS नियम के दो भाग होते हैं: एक चयनकर्ता जो यह चुनता है कि कौन से तत्वों को स्टाइल करना है, और घोषणाओं का एक ब्लॉक जो कहता है कि कैसे। सबसे सरल चयनकर्ता तत्व का नाम है, जिसे प्रकार चयनकर्ता कहा जाता है। p लिखें और पृष्ठ पर हर पैराग्राफ को स्टाइल किया जाता है।

यह अक्सर बहुत व्यापक होता है। आप शायद ही कभी चाहते हैं कि सभी पैराग्राफ एक जैसे दिखें। तो आप तत्वों को HTML class विशेषता का उपयोग करके एक क्लास कहा जाने वाला लेबल देते हैं, और CSS से उस लेबल को एक बिंदु के साथ लक्षित करते हैं। एक क्लास को एक नाम टैग की तरह सोचें: आप उसी टैग को हर तत्व पर लगाते हैं जिसे आप एक समूह के रूप में मानना चाहते हैं, फिर एक बार टैग को स्टाइल करते हैं।

किसी तत्व को लक्षित करने के तीन बुनियादी तरीके हैं। एक प्रकार चयनकर्ता टैग के नाम से मेल खाता है (p हर पैराग्राफ से मेल खाता है)। एक वर्ग चयनकर्ता class विशेषता से मेल खाता है और एक अग्रणी बिंदु के साथ लिखा जाता है (.button)। एक आईडी चयनकर्ता id विशेषता से मेल खाता है और एक अग्रणी हैश के साथ लिखा जाता है (#header)।

अपने डिफ़ॉल्ट स्टाइलिंग हुक के रूप में वर्गों के लिए पहुंचें। एक क्लास कितने भी तत्वों पर जा सकती है और एक तत्व कई वर्गों को ले जा सकता है, इसलिए वर्ग पुन: प्रयोग करने योग्य समूहों का वर्णन करते हैं: सब कुछ .card के साथ एक रूप साझा करता है। प्रकार चयनकर्ता व्यापक आधार स्टाइलिंग के लिए उपयोगी हैं (उदाहरण के लिए, शरीर फॉन्ट सेट करना) लेकिन वे कुंद हैं, क्योंकि वे उस प्रकार के हर तत्व को मारते हैं। आईडी को एक पृष्ठ पर अद्वितीय होने के लिए अभिप्रेत किया जाता है, इसलिए उनके माध्यम से स्टाइलिंग एक नियम को एक एकल तत्व तक सीमित करती है और, जैसा कि आप विशिष्टता के तहत देखेंगे, वे अतिरिक्त वजन ले जाते हैं जो उन्हें ओवरराइड करने में मुश्किल बनाता है।

तीन चयनकर्ता प्रकार बुनियादी बातें कवर करते हैं, और उनके बीच का अंतर आंशिक रूप से मिलान करने के बारे में है और आंशिक रूप से वजन के बारे में है। एक प्रकार चयनकर्ता (जिसे एक टैग या तत्व चयनकर्ता भी कहा जाता है) तत्व के नाम से मेल खाता है: p, section, input। एक वर्ग चयनकर्ता, .card लिखा गया, किसी भी तत्व से मेल खाता है जिसकी class विशेषता उस टोकन को शामिल करती है, और विशेषता स्पेस अलग है ताकि एक तत्व कई वर्गों को धारण कर सके। एक आईडी चयनकर्ता, #header लिखा गया, एकल तत्व से मेल खाता है जिसकी id विशेषता उस मान के बराबर है; एक आईडी को एक दस्तावेज़ के भीतर अद्वितीय होना आवश्यक है।

व्यावहारिक नियम लगभग विशेष रूप से वर्गों के माध्यम से शैली करना है। वर्ग केवल तीनों में से हैं जो पुन: प्रयोग करने योग्य और विशिष्टता में कम दोनों हैं (प्राथमिकता स्कोर जो ब्राउज़र संघर्षों को हल करने के लिए उपयोग करता है, इस अध्याय के अंत में शामिल है), जो आपकी शैलियों को सपाट और ओवरराइड करने योग्य रखता है। प्रकार चयनकर्ता आधार नियमों के एक छोटे समूह से संबंधित हैं: एक रीसेट, body पर डिफ़ॉल्ट फॉन्ट, a या input पर समझदारी भरे डिफ़ॉल्ट। आईडी JavaScript हुक और फ्रैगमेंट लिंक लक्ष्य (#pricing एक यूआरएल में) के रूप में वैध हैं, लेकिन एक स्टाइलिंग हुक के रूप में वे एक जाल हैं: वे अद्वितीय हैं इसलिए वे एक समूह का वर्णन नहीं कर सकते, और उनकी उच्च विशिष्टता का मतलब है कि एक बाद की क्लास नियम उन्हें एस्केलेशन के बिना ओवरराइड नहीं कर सकता। वर्गों के साथ स्टाइल करें, आईडी को एंकर और स्क्रिप्ट के लिए आरक्षित करें।

<button class="btn-primary">साइन अप करें</button>
<button class="btn-primary">अभी खरीदें</button>

/* प्रकार चयनकर्ता: पृष्ठ पर हर बटन */
button {
  font-family: inherit;
}

/* वर्ग चयनकर्ता: केवल btn-primary टैग किए गए तत्व */
.btn-primary {
  background: rebeccapurple;
  color: white;
}

दोनों बटन एक नियम से .btn-primary स्टाइलिंग को उठाते हैं, क्योंकि वे क्लास साझा करते हैं। वह पुन: उपयोग वह संपूर्ण कारण है कि वर्ग वह उपकरण हैं जिसके लिए आप पहुंचते हैं। यह सीधे CSS कैसे काम करता है पर बनाया गया है, जहां प्रत्येक नियम एक चयनकर्ता को घोषणाओं के एक सेट के साथ जोड़ता है।

Junoप्रकार, वर्ग, और आईडी चयनकर्ता एक प्रकार चयनकर्ता जैसे p उस प्रकार के हर तत्व को मार देता है, जो आमतौर पर इससे अधिक होता है जितना आप चाहते हैं। एक क्लास एक नाम टैग है जिसे आप जिन तत्वों की परवाह करते हैं उन पर लगाते हैं और एक बिंदु के साथ स्टाइल करते हैं, जैसे .btn-primary। लगभग सब कुछ के लिए क्लासों के साथ शुरुआत करें और आप बहुत गलत नहीं जाएंगे।

Junoप्रकार, वर्ग, और आईडी चयनकर्ता वर्ग आपका डिफ़ॉल्ट हुक हैं: पुन: प्रयोग करने योग्य, और एक तत्व कई को पहन सकता है। शरीर फॉन्ट जैसी व्यापक आधार शैलियों के लिए प्रकार चयनकर्ताओं को रखें, और स्टाइलिंग के लिए आईडी को बहुत विशिष्ट और बहुत एकल-उपयोग के रूप में मानें। अपने आप को भविष्य के सिरदर्द से बचाएं और पहले एक क्लास के लिए पहुंचें।

Junoप्रकार, वर्ग, और आईडी चयनकर्ता वर्ग केवल बुनियादी चयनकर्ता हैं जो पुन: प्रयोग करने योग्य और कम विशिष्टता दोनों हैं, जो बिल्कुल यही कारण है कि आप उनके माध्यम से शैली करते हैं और अपने नियमों को सपाट रखते हैं। प्रकार चयनकर्ता एक छोटी आधार परत में अपना स्थान अर्जित करते हैं, और आईडी स्क्रिप्ट और लिंक एंकर से संबंधित हैं, स्टाइलिंग के लिए नहीं। जिस दिन एक आईडी नियम बाद की क्लास द्वारा ओवरराइड किए जाने से इनकार करता है, आप खुश होंगे कि आपने उन्हें बाहर रखा।

संयोजक: संबंध के आधार पर चयन करना

कभी-कभी आप किसी तत्व को केवल तभी स्टाइल करना चाहते हैं जब वह किसी दूसरे के अंदर बैठता है। आपके नेविगेशन में लिंक एक पैराग्राफ में लिंक से अलग दिखना चाहिए, भले ही दोनों <a> तत्व हों। आप उस संबंध को एक संयोजक के साथ वर्णित करते हैं: दो चयनकर्ताओं को एक स्पेस के साथ एक साथ रखें, और CSS इसे "दूसरा एक, लेकिन पहले के अंदर केवल" के रूप में पढ़ता है।

तो .nav a का अर्थ है "nav क्लास वाले तत्व के अंदर कोई भी लिंक"। स्पेस यहां असली काम कर रहा है। यह सजावट नहीं है, यह अंदर देखने का निर्देश है।

एक संयोजक दो चयनकर्ताओं को जोड़ता है और एचटीएमएल में तत्वों के संबंध के आधार पर मेल खाता है। सबसे आम वंशज संयोजक है, जो एक स्पेस के रूप में लिखा गया है: .nav a एक .nav के अंदर कहीं भी हर <a> से मेल खाता है, चाहे कितनी भी गहराई से नेस्टेड हो।

जब आप केवल प्रत्यक्ष बच्चे चाहते हैं न कि गहरे वंशज, बाल संयोजक > का उपयोग करें। .menu > li सूची आइटम से मेल खाता है जो .menu के तत्काल बच्चे हैं, किसी भी नेस्टेड सूची को छोड़ देते हैं। वहाँ भी सिबिंग संयोजकों के दो हैं जो तत्वों के लिए हैं जो एक माता-पिता साझा करते हैं: आसन्न सिबिंग + तत्व से तत्काल बाद से मेल खाता है (h2 + p एक शीर्षक के ठीक बाद पैराग्राफ को स्टाइल करता है), और सामान्य सिबिंग ~ किसी भी बाद के सिबिंग से मेल खाता है। वंशज और बाल अधिकांश वास्तविक काम को कवर करते हैं; सिबिंग संयोजक रिक्त स्थान और रूप पैटर्न के लिए उपयोगी हैं।

एक संयोजक दो चयनकर्ताओं के बीच का चरित्र है जो संरचनात्मक संबंध को परिभाषित करता है जिसे उन्हें संतुष्ट करना चाहिए। वंशज संयोजक (एक स्पेस) बाईं ओर के अंदर नेस्टेड होने पर दाईं ओर के चयनकर्ता से मेल खाता है, किसी भी गहराई पर। बाल संयोजक (>) इसे केवल प्रत्यक्ष बच्चों तक सीमित करता है: .menu > li एक नेस्टेड .submenu में दफन सूची आइटमों को अनदेखा करता है। आसन्न सिबिंग संयोजक (+) एक तत्व से मेल खाता है जो एक ही माता-पिता के साथ तुरंत दूसरे का अनुसरण करता है, और सामान्य सिबिंग संयोजक (~) एक ही माता-पिता के साथ किसी भी बाद के सिबिंग से मेल खाता है।

उत्पादन में दो चीजें पकड़ने के लिए लायक हैं। सबसे पहले, एक यौगिक चयनकर्ता ब्राउज़र के मेचर में दाएं से बाएं पढ़ता है: .nav a के लिए इंजन पहले <a> तत्वों को खोजता है, फिर प्रत्येक की जांच करने के लिए एक .nav पूर्वज है। यह है कि बहुत लंबे वंशज श्रृंखला अधिक खर्चीली हैं और क्यों एक तंग .nav > a एक ढीला .nav a की तुलना में सस्ता हो सकता है। दूसरा, वंशज चयनकर्ता आपके CSS को आपके मार्कअप संरचना से जोड़ता हैं: .card .title टूट जाता है जब कोई शीर्षक को किसी अन्य तत्व में लपेटता है। तत्व पर सीधी क्लास (.card-title) पसंद करना शैलियों को मार्कअप परिवर्तनों के लिए लचीला रखता है, और जब कोई संबंध वह चीज़ है जो आप वास्तव में व्यक्त करना चाहते हैं तो आप संयोजकों तक गिरते हैं।

/* वंशज: नेव के अंदर कोई भी लिंक */
.nav a {
  text-decoration: none;
}

/* बाल: केवल सूची आइटम जो .menu के तत्काल बच्चे हैं */
.menu > li {
  display: inline-block;
}

पहला नियम नेव के अंदर नेस्टेड हर लिंक तक पहुंचता है; दूसरा केवल मेनू की शीर्ष-स्तर की वस्तुओं तक पहुंचता है और किसी भी नेस्टेड सूची को अकेला छोड़ देता है। उनके बीच चुनना यह चुनना है कि आप नियम को कितना नीचे यात्रा करना चाहते हैं।

Junoसंयोजक दो चयनकर्ताओं के बीच एक स्पेस का अर्थ है "अंदर": .nav a लिंक को स्टाइल करता है जो नेव के अंदर बैठते हैं। वह स्पेस एक निर्देश है, दिखने के लिए रिक्त स्थान नहीं, इसलिए इसे गलती से ड्रॉप न करें। यह एक पैटर्न रोज़मर्रा की स्टाइलिंग का बहुत कुछ कवर करता है।

Junoसंयोजक स्पेस वंशज संयोजक है और किसी भी गहराई पर मेल खाता है; > इसे केवल प्रत्यक्ष बच्चों तक सीमित करता है। सिबिंग + और ~ वहाँ हैं जब आप इसके आधार पर एक तत्व को स्टाइल करना चाहते हैं कि उससे पहले क्या आता है। वंशज और बाल आमतौर पर आपके दिन में सब कुछ संभालेंगे।

Junoसंयोजक संयोजक उपयोगी हैं, और वे आपके CSS को आपकी एचटीएमएल संरचना से भी बांधते हैं, इसलिए .card .title जैसी एक लंबी वंशज श्रृंखला एक रीफैक्टर दूर है। तत्व पर सीधी क्लास पसंद करें और संयोजकों तक गिरें जब संबंध वह वास्तविक चीज़ है जो आप व्यक्त करना चाहते हैं। मिलान दाएं से बाएं भी चलता है, इसलिए एक तंग > अक्सर एक ढीली वंशज श्रृंखला को मारता है।

छद्म-वर्ग: स्थिति के आधार पर स्टाइलिंग

तत्व विभिन्न स्थितियों में हो सकते हैं। एक लिंक शांत बैठ सकता है या माउस इसके ऊपर मंडरा सकता है। एक छद्म-वर्ग आपको अपनी स्थिति के आधार पर एक तत्व को स्टाइल करने देता है, और आप इसे चयनकर्ता के बाद एक एकल कोलन के साथ लिखते हैं।

जो आप सबसे पहले उपयोग करेंगे वह :hover है। .btn-primary:hover लिखें और वे शैलियां केवल तभी लागू होती हैं जब पॉइंटर बटन के ऊपर हो, जो यह है कि बटन और लिंक कैसे देते हैं कि छोटी दृश्य प्रतिक्रिया जब आप उन पर इशारा करते हैं।

एक छद्म-वर्ग एक विशेष स्थिति या स्थिति में एक तत्व को लक्षित करता है, एक एकल कोलन के साथ लिखा गया: :hover जब पॉइंटर इसके ऊपर हो, :focus जब इसे कीबोर्ड इनपुट के लिए चुना जाए, :first-child जब यह अपने माता-पिता के अंदर पहला तत्व हो।

:focus ध्यान देने योग्य है क्योंकि यह एक पहुंच की चिंता है, एक बढ़िया नहीं। जो लोग कीबोर्ड के साथ नेविगेट करते हैं वे एक नियंत्रण से दूसरे पर टैब करते हैं, और :focus शैली उन्हें बताने वाली एकमात्र संकेत है कि वे कहां हैं। फोकस आउटलाइन्स को कभी भी एक दृश्यमान विकल्प से बदले बिना निकालें। :nth-child() जैसे संरचनात्मक छद्म-वर्ग भी हैं, जो कोष्ठक में एक पैटर्न लेता है: :nth-child(odd) हर दूसरे तत्व से मेल खाता है, तालिका पंक्तियों को पट्टी करने के लिए उपयोगी। :first-child और :last-child एक अतिरिक्त क्लास की आवश्यकता के बिना एक समूह के सिरों को पकड़ते हैं।

एक छद्म-वर्ग (एक एकल कोलन के बाद एक कीवर्ड) एक तत्व से मेल खाता है जो एक दिए गए स्थिति या संरचनात्मक स्थिति में है, आपके लिए कोई भी मार्कअप जोड़े बिना। स्थिति छद्म-वर्गों में :hover, :active, और :focus शामिल हैं; संरचनात्मक लोगों में :first-child, :last-child, और पैरामीटर :nth-child() शामिल है, जिसका तर्क एक an+b पैटर्न है (:nth-child(2n) हर दूसरा तत्व है, :nth-child(3n+1) तीनों के प्रत्येक समूह का पहला है)।

दो उत्पादन नोट्स। :focus कीबोर्ड पहुंच के लिए गैर-अनुमोदनीय है: कीबोर्ड उपयोगकर्ता अपनी स्थिति जानने के लिए फोकस रिंग पर निर्भर करते हैं, इसलिए एक दृश्यमान प्रतिस्थापन के बिना आउटलाइन को छीलना उनके लिए एक इंटरफेस को अनुपयोगी बनाता है। :focus-visible को प्राथमिकता दें, जो कीबोर्ड इंटरैक्शन के लिए रिंग दिखाता है लेकिन माउस क्लिक पर इसे दबाता है, इसलिए आप साफ पॉइंटर अनुभव और एक पहुंचयोग्य कीबोर्ड दोनों प्राप्त करते हैं। संरचनात्मक पक्ष पर, याद रखें कि :nth-child(n) सभी सिबिंग को प्रकार की परवाह किए बिना गिनता है, जबकि :nth-of-type(n) केवल एक ही तत्व के सिबिंग को गिनता है, जो काम करने वाले नियम और एक के बीच का अंतर है जो चुप रहता है गलत तरीका से गिना जाता है जब एक आवारा तत्व सूची में बैठता है।

.btn-primary:hover {
  background: purple;
}

/* कीबोर्ड उपयोगकर्ताओं को एक दृश्यमान फोकस संकेतक की आवश्यकता है */
.btn-primary:focus-visible {
  outline: 2px solid rebeccapurple;
  outline-offset: 2px;
}

पहला नियम बटन के ऊपर पॉइंटर होने पर आग लगाता है; दूसरा कीबोर्ड द्वारा चुने जाने पर एक स्पष्ट रिंग खींचता है, जो एक माउस के बिना पृष्ठ को उपयोग करने योग्य रखता है। रंग और आउटलाइन पसंद यहां CSS कैसे काम करता है और किसी भी संपत्ति पर आप सेट करते हैं उससे मान तक जुड़ते हैं।

Junoछद्म-वर्ग एक छद्म-वर्ग एक निश्चित स्थिति में एक तत्व को स्टाइल करता है, एक कोलन के साथ लिखा गया, जैसे :hover जब पॉइंटर इसके ऊपर हो। वह है जहां एक बटन का होवर प्रभाव से आता है। आप इसे चयनकर्ता के ठीक पर जोड़ते हैं, उनके बीच कोई स्पेस नहीं।

Junoछद्म-वर्ग छद्म-वर्ग मेल खाएं स्थिति और स्थिति: :hover, :focus, :nth-child(), :first-child। :focus को एक पहुंच आवश्यकता के रूप में मानें, क्योंकि कीबोर्ड उपयोगकर्ताओं को यह देखने की आवश्यकता है कि वे कहां हैं, इसलिए कभी भी एक दृश्यमान प्रतिस्थापन के बिना आउटलाइन को छीलें। वह आदत आपके पृष्ठों को सभी के लिए उपयोगी रखेगा।

Junoछद्म-वर्ग नंगे :focus पर :focus-visible तक पहुंचें ताकि रिंग कीबोर्ड उपयोगकर्ताओं के लिए दिखाई दे लेकिन माउस क्लिक पर नहीं, और कभी भी एक इंटरफेस भेजें जो फोकस संकेतक को साफ करता है। :nth-child बनाम :nth-of-type जाल देखें: एक हर सिबिंग को गिनता है, दूसरा केवल समान-प्रकार के सिबिंग को गिनता है, और गलत विकल्प गलत तरीके से गिना जाता है जब एक आवारा तत्व सूची में उतरता है। यह उस प्रकार की बग है जो ठीक दिखती है जब तक यह नहीं करती है।

छद्म-तत्व: एक तत्व के भाग को स्टाइल करना

एक छद्म-वर्ग एक पूरे तत्व को एक निश्चित स्थिति में स्टाइल करता है। एक छद्म-तत्व अलग है: यह आपको एक तत्व के भाग को स्टाइल करने देता है, या सामग्री का एक छोटा सा टुकड़ा जोड़ता है जो आपकी एचटीएमएल में बिल्कुल नहीं है।

जो दो आप पहले से मिलेंगे वे ::before और ::after हैं। वे एक तत्व की शुरुआत या अंत में सामग्री को सम्मिलित करते हैं, और आप content संपत्ति के साथ सम्मिलित करने के लिए क्या बताते हैं। दो कोलन पर ध्यान दें: वह दोहरी कोलन है कि CSS एक छद्म-तत्व को छद्म-वर्ग से कैसे अलग करता है।

एक छद्म-तत्व पूरी चीज़ के बजाय एक तत्व के एक विशेष भाग को स्टाइल करता है, और यह छद्म-वर्ग से अलग करने के लिए दोहरी कोलन (::) का उपयोग करता है। सबसे अधिक उपयोग किए जाने वाले ::before और ::after हैं, जो एक तत्व की शुरुआत या अंत में एक उत्पन्न बाल बनाते हैं। उन्हें content संपत्ति की आवश्यकता होती है प्रदान करने के लिए, भले ही यह खाली है (content: ""), और वह उत्पन्न सामग्री सजावटी है: स्क्रीन रीडर इसे छोड़ सकते हैं, इसलिए कभी भी वहां अर्थ न डालें।

एक अन्य सामान्य एक ::placeholder है, जो एक खाली इनपुट के अंदर फीके संकेत पाठ को स्टाइल करता है। क्योंकि छद्म-तत्व तत्व के एक टुकड़े को लक्षित करते हैं, वे आपको छोटे दृश्य टुकड़े बनाने देते हैं (एक लेबल से पहले एक आइकन, एक शीर्षक के बाद एक सजावटी रेखा) अपने मार्कअप में अतिरिक्त टैग जोड़े बिना।

एक छद्म-तत्व एक तत्व के उस भाग को प्रकट करता है जिसका कोई टैग नहीं है, एक दोहरी-कोलन कीवर्ड के माध्यम से स्टाइल किया गया। ::before और ::after एक इनलाइन बॉक्स उत्पन्न करते हैं क्योंकि तत्व का पहला या अंतिम बाल; वे केवल तब रेंडर करते हैं जब content सेट हो (एक विशुद्ध रूप से सजावटी बॉक्स के लिए content: "" का उपयोग करें), और वह उत्पन्न सामग्री पहुंच वृक्ष के बाहर बैठती है, इसलिए यह सजावटी रहता है और कभी अर्थ नहीं देता है कि एक उपयोगकर्ता को पढ़ने की आवश्यकता है। ::placeholder एक इनपुट के संकेत पाठ को लक्षित करता है, ::selection हाइलाइट किए गए पाठ को लक्षित करता है, ::first-line और ::first-letter टाइपोग्राफिक स्लाइस को लक्षित करते हैं।

एकल-बनाम-दोहरी-कोलन कहानी जानने के लिए लायक है। आधुनिक छद्म-तत्व उन्हें छद्म-वर्गों से अलग करने के लिए :: (दो कोलन) का उपयोग करते हैं, CSS3 में पेश किया गया एक अंतर। चार मूल छद्म-तत्वों के लिए (:before, :after, :first-line, :first-letter), एकल-कोलन रूप विरासत कारणों के लिए अभी भी पार्स करता है, लेकिन दोहरी-कोलन रूप लिखें; एकल कोलन एक संगतता अवशेष है, न कि एक शैली जिसे आपको नए कोड में ले जाना चाहिए। उत्पादन में, ::before और ::after बहुत शांत काम करते हैं: टूलटिप्स, कस्टम सूची मार्कर, पुरानी लेआउट में क्लीयरफिक्स, और सजावटी फ्लोरिश जो अन्यथा एचटीएमएल को गड़बड़ा देगा।

/* हर नेव लिंक के बाद एक सजावटी तीर जोड़ें */
.nav a::after {
  content: " →";
  color: rebeccapurple;
}

/* एक खोज बॉक्स के अंदर संकेत पाठ को स्टाइल करें */
.search-input::placeholder {
  color: grey;
  font-style: italic;
}

::after नियम एक तीर सम्मिलित करता है जो केवल स्टाइलिंग में रहता है, एचटीएमएल में नहीं, जबकि ::placeholder इनपुट के अंदर पहुंचता है ब्राउज़र द्वारा खींचे गए पाठ को स्टाइल करने के लिए। दोनों कुछ ऐसा स्टाइल करते हैं जो आप एक सादे चयनकर्ता के साथ अन्यथा नहीं पहुंच सकते। यदि आप संकेत पाठ और लेबल को स्टाइल कर रहे हैं, तो टाइपोग्राफी अध्याय पाठ पक्ष पर गहरा जाता है।

Junoछद्म-तत्व एक छद्म-तत्व एक तत्व के भाग को स्टाइल करता है या एक छोटी सामग्री जोड़ता है, और यह दो कोलन का उपयोग करता है, जैसे ::before और ::after। उन दोनों को दिखाने के लिए एक content संपत्ति की आवश्यकता है। दोहरी कोलन एक छद्म-तत्व को एक छद्म-वर्ग से बताने का त्वरित तरीका है।

Junoछद्म-तत्व छद्म-तत्व एक दोहरी कोलन का उपयोग करते हैं और एक तत्व के एक टुकड़े को स्टाइल करते हैं: ::before, ::after, ::placeholder। पहले दो को content मान की आवश्यकता है, यहां तक ​​कि एक खाली "", और वह सामग्री सजावटी है, इसलिए असली अर्थ अपनी एचटीएमएल में रखें। वे आपको केवल एक सजावट को हैंग करने के लिए टैग जोड़ने से बचाते हैं।

Junoछद्म-तत्व छद्म-तत्व को दो कोलन के साथ लिखें; एकल-कोलन रूप केवल चार मूल लोगों के लिए एक विरासत सनक के रूप में टिका हुआ है। ::before और ::after से सामग्री पहुंच वृक्ष के बाहर रहती है, इसलिए यह सजावटी रहता है और कभी भी कुछ भी नहीं देता है जो एक उपयोगकर्ता को पढ़ने की आवश्यकता है। वे शांति से टूलटिप्स, कस्टम मार्कर, और फ्लोरिश को संभालते हैं जो अन्यथा आपके मार्कअप को फुलाएंगे।

विशिष्टता: कौन सा नियम जीतता है

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

लघु संस्करण शक्ति का एक क्रम है। एक आईडी चयनकर्ता एक वर्ग चयनकर्ता को मारता है, और एक वर्ग चयनकर्ता एक प्रकार चयनकर्ता को मारता है। तो अगर #header और .title दोनों एक ही तत्व पर रंग सेट करते हैं, तो आईडी जीतता है। जब दो नियम समान रूप से विशिष्ट हों, तो फ़ाइल में बाद का वाला जीतता है।

जब कई नियम एक ही तत्व को लक्षित करते हैं और एक ही संपत्ति सेट करते हैं, तो ब्राउज़र विशिष्टता के साथ संघर्ष को हल करता है, शामिल चयनकर्ता के प्रकारों के आधार पर एक स्कोर। सबसे मजबूत से सबसे कमजोर तक का क्रम है: इनलाइन शैलियां (तत्व पर style विशेषता), फिर आईडी, फिर वर्ग (और छद्म-वर्ग और विशेषता चयनकर्ता), फिर प्रकार चयनकर्ता (और छद्म-तत्व)। एक अधिक विशिष्ट चयनकर्ता स्रोत क्रम की परवाह किए बिना जीतता है; केवल जब विशिष्टता संबंध बाद का नियम जीतता है।

यह व्यावहारिक कारण है कि वर्गों पर झुकें और स्टाइलिंग के लिए आईडी से बचें। यदि आप आईडी के साथ स्टाइल करते हैं, तो एक बाद की क्लास नियम उन्हें ओवरराइड नहीं कर सकता, इसलिए आप बढ़ाव में समाप्त होते हैं। और !important, जिसे आप किसी घोषणा में जोड़ सकते हैं इसे सब कुछ पर जीतने के लिए मजबूर करने के लिए, इसे एक अंतिम उपाय के रूप में माना जाना चाहिए: यह सामान्य प्रवाह को तोड़ता है और एकमात्र तरीका एक !important को मारना है एक अन्य है, जो एक सर्पिल है जिसे आप शुरू नहीं करना चाहते।

विशिष्टता वह एल्गोरिथम है जिसे ब्राउज़र संघर्ष वाली घोषणाओं के बीच चुनने के लिए उपयोग करता है। इसे तीन-भाग गिनती के रूप में गणना की जाती है, अक्सर (a, b, c) लिखा जाता है: a आईडी चयनकर्ताओं की संख्या है, b वर्ग, विशेषता, और छद्म-वर्ग चयनकर्ताओं की संख्या है, और c है प्रकार और छद्म-तत्व चयनकर्ताओं की संख्या। भाग बाएं से दाएं तुलना करते हैं, इसलिए कोई भी आईडी वर्गों की किसी भी संख्या को मारता है, और कोई भी वर्ग प्रकार चयनकर्ताओं की किसी भी संख्या को मारता है। #header .title a स्कोर (1, 1, 1) करता है; .nav .menu .item a स्कोर (0, 3, 1) करता है; पहला आईडी अकेले जीतता है। इनलाइन style विशेषताएं सभी चयनकर्ता विशिष्टता से ऊपर बैठती हैं, और !important (एक झंडा जिसे आप मजबूर करने के लिए एक मान के लिए जोड़ते हैं) यहां तक ​​कि अतिक्रमण करता है; सार्वभौमिक चयनकर्ता * और संयोजक स्कोर में कुछ भी जोड़ते हैं।

दो आधुनिक उपकरण बदलते हैं कि आप इसे कैसे प्रबंधित करते हैं। :is() चयनकर्ताओं की एक सूची लेता है और यदि उनमें से कोई भी मेल खाते हैं, लेकिन यह अपने सबसे विशिष्ट तर्क की विशिष्टता लेता है, तो :is(#header, .title) आईडी का वजन प्राप्त करता है। :where() एक ही मिलान करता है लेकिन हमेशा शून्य विशिष्टता है, जो कम-वजन आधार शैलियां लिखने के लिए उपकरण है जो कुछ भी ओवरराइड कर सकता है। :has(), संबंधपरक छद्म-वर्ग, एक तत्व से मेल खाता है जिसमें कुछ है ("एक .card जिसमें एक छवि है", .card:has(img)) और अपने तर्क की विशिष्टता लेता है। इसके सभी नीचे रख देखभाल विशिष्टता को कम और सपाट रखना है: एकल-क्लास चयनकर्ताओं पसंद करते हैं, आईडी और !important से बचें, और कम-वजन आधार शैलियां लिखने के लिए :where() का उपयोग करें जो कुछ भी पैदावार दे सकता है। सपाट विशिष्टता का मतलब है कि एक बाद का नियम हमेशा बाद में होने से जीत सकता है, जो प्रवाह आपके के विरुद्ध काम कर रहा है बजाय आपके साथ।

/* प्रकार चयनकर्ता, विशिष्टता (0, 0, 1) */
p {
  color: grey;
}

/* वर्ग चयनकर्ता, विशिष्टता (0, 1, 0): यह एक जीतता है */
.intro {
  color: black;
}

<p class="intro">यह पैराग्राफ काला है, क्योंकि वर्ग नियम प्रकार नियम को आगे करता है।</p>

दोनों नियम पैराग्राफ को लक्षित करते हैं और दोनों color सेट करते हैं, लेकिन वर्ग चयनकर्ता प्रकार चयनकर्ता की तुलना में अधिक विशिष्ट है, इसलिए पैराग्राफ काला है। विशिष्टता सीढ़ी को ऊपर या नीचे एक चयनकर्ता को नदिंग करना अक्सर संघर्ष को हल करने के लिए सब कुछ है भारी उपकरणों का सहारा लिए बिना। बॉक्स मॉडल अध्याय समान प्रवाह में चलता है जब रिक्त स्थान नियम टकराते हैं।

Junoविशिष्टता जब दो नियम एक ही तत्व पर लड़ते हैं, तो अधिक विशिष्ट जीतता है: एक आईडी एक वर्ग को मारता है, और एक वर्ग एक प्रकार चयनकर्ता को मारता है। यदि वे समान रूप से विशिष्ट हैं, तो कोई भी फ़ाइल में आखिरी जीतता है। वह अधिकांश संघर्षों को समझाता है।

Junoविशिष्टता शक्ति इनलाइन, फिर आईडी, फिर वर्ग, फिर प्रकार चलती है, और एक अधिक विशिष्ट नियम कहीं भी बैठा जीतता है। यह क्यों है कि वर्गों के साथ स्टाइलिंग और आईडी से बचना आपके CSS को ओवरराइड करने योग्य रखता है। !important को एक अंतिम उपाय के रूप में रखें, क्योंकि एकमात्र चीज़ जो एक को मारता है वह एक अन्य है।

Junoविशिष्टता विशिष्टता (a, b, c) के रूप में गिनती करती है आईडी, वर्ग, और प्रकार के लिए, बाएं से दाएं तुलना की जाती है, तो एक आईडी वर्गों के किसी भी ढेर को आगे करता है। इसे कम और सपाट रखें: एकल वर्ग, स्टाइलिंग के लिए कोई आईडी नहीं, कोई !important नहीं, और कम-वजन आधार शैलियों लिखने के लिए :where()। सपाट विशिष्टता का मतलब है कि एक बाद का नियम हमेशा बाद में होने से जीत सकता है, और यह प्रवाह आपके साथ काम कर रहा है।