ग्रॅबझीट मध्ये सीएसएस निवडकर्ता वापरणे

CSS निवडक लक्ष्य घटकामध्ये वापरले जातात, घटक लपवा आणि एक किंवा अधिक HTML घटक ओळखण्यासाठी घटक वैशिष्ट्यांची प्रतीक्षा करा. सीएसएस निवडकांचे दोन मुख्य प्रकार म्हणजे एकतर आयडी किंवा वर्गानुसार निवडणे. खाली दर्शविल्याप्रमाणे HTML घटकामध्ये id विशेषता असल्यास आयडी असते.

<span id="myidentifier">Example Text</span>

ते निवडण्यासाठी तुम्ही CSS सिलेक्टर तयार करा #myidentifier

HTML घटकाला क्लास असल्यास या उदाहरणात दाखवल्याप्रमाणे क्लास विशेषता असेल.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

ते निवडण्यासाठी तुम्ही CSS सिलेक्टर तयार करा .myclass

च्या वर्गासह एखादा विशिष्ट घटक निवडायचा असल्यास myclass या प्रकरणात असे करण्यासाठी आपण मानक CSS निवडक वापरू शकता नववी-मुल(2) असे निवडक: .myclass:nth-child(2) दुसरा मायक्लास स्पॅन निवडण्यासाठी. तथापि हे केवळ या प्रकरणात कार्य करेल कारण मूळ div घटक अंतर्गत कोणतेही इतर घटक नाहीत. उदाहरणार्थ एपी घटक असल्यास ते nth-चाइल्ड इंडेक्स बदलेल.

अद्वितीय आयडी किंवा वर्गाशिवाय HTML घटक निवडा

काहीवेळा तुम्हाला निवडण्यासाठी आवश्यक असलेल्या HTML घटकामध्ये पृष्ठामध्ये अद्वितीय असलेला आयडी किंवा वर्ग नसतो. हे HTML घटक निवडताना, अधिक क्लिष्ट CSS निवडक आवश्यक आहे.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

उदाहरणार्थ, वरील उदाहरणामध्ये, आपल्याला लिंकमधील DIV घटक निवडायचा आहे. हे करण्यासाठी, आम्हाला एक CSS निवडक निर्दिष्ट करणे आवश्यक आहे जे युनिक DIV वरून खाली कार्य करते Header वर्ग.

div.Header a div

CSS सिलेक्टर हे वेब डेव्हलपमेंटचे मानक वैशिष्ट्य आहे. हा लेख एक चांगला विहंगावलोकन देतो CSS निवडक कसे वापरावे.

एकाधिक जुळणारे घटक हाताळणे

सीएसएस सिलेक्टरकडून एकाधिक एचटीएमएल घटक परत केले असल्यास आणि तुम्ही लक्ष्य घटक वापरत असल्यास किंवा घटक वैशिष्ट्यांची प्रतीक्षा करत असल्यास फक्त पहिला जुळणारा घटक वापरला जाईल. तथापि आपण लपवा घटक वैशिष्ट्य वापरत असल्यास सर्व जुळणारे HTML घटक लपवले जातील.

तुम्हाला वेगवेगळ्या आयडी किंवा वर्गांसह अनेक घटक लपवायचे असल्यास तुम्ही प्रत्येक CSS निवडक स्वल्पविरामाने विभक्त करून करू शकता. म्हणून उदाहरणार्थ वर्ग आणि वरील आयडी लपवण्यासाठी तुम्ही खालील वापराल #myidentifier,.myclass