सीएसएस डिसेंंडंट सिलेक्टर म्हणजे काय?

HTML दस्तऐवजाची संरचना कुटुंबातील वृक्षासारखीच असते. आपल्या कुटुंबात, तुमच्या आधी तुमच्या आधी आलेल्या तुमच्या आई-वडिलांना आणि इतरही आहेत. हे तुमचे पूर्वज आहेत. मुले आणि त्या वृक्ष आपल्या नंतर येतात ज्यांनी आपल्या वंशज आहेत एचटीएमएल सारख्याच फॅशन मध्ये काम करते. इतर घटकांच्या आत असणार्या घटक त्यांचे वंशज आहेत. उदाहरणार्थ, जवळजवळ प्रत्येक HTML घटक टॅग्जच्या आत आहे म्हणून ते त्या शरीराच्या घटकांचे वंशज होतील. हे संबंध समजून घेणे महत्त्वाचे आहे जेव्हा आपण सीएसएससह काम करणे सुरू करता आणि व्हिज्युअल स्टाईल लागू करण्यासाठी विशिष्ट घटकांना लक्ष्य करणे आवश्यक असते.

CSS चांगले चयनकर्ता

एक सीएसएस वंशज निवड दुसरा घटक (किंवा अधिक अचूकपणे नमूद केलेले, एक घटक जो दुसर्या घटकांचा वंशज आहे) आत असलेल्या घटकांना लागू होतो. उदाहणार्थ, एक unordered यादीमध्ये टॅगसहित वंश म्हणून टॅग आहे. उदाहरण म्हणून खालील HTML चा वापर करू:

• हा एक दुवा आहे

  लाई टॅग युएल टॅगचे वारस आहेत. ए टॅग लाई (बाल वंशज) आणि उल (पोटाचा वंशज) टॅग्ज या दोन्हींचा वंशज आहे. जर आपण कुटुंब मंडळाच्या उदाहरणाद्वारे याचा विचार करता, तर

  पालक असतं,
  • हे घटक मूल होईल, आणि हा
  • आणि त्याचा नातू असेल.
    .

    तर आपण हे संतती निवडकर्त्यांद्वारे वेब पृष्ठामध्ये विशिष्ट घटक कसे लक्ष्यित कराल? प्रथम, आपल्याला स्पेसद्वारे विभक्त केलेले दोन (किंवा अधिक) प्रकार निवडकर्त्यांचा वापर करून वंश निवडक परिभाषित करावे लागेल.

    li {मजकूर-सजावट: काहीही नाही; }

    त्या उदाहरणात, शैली केवळ एक दुवा घटक () लागू होईल जी सूची-आयटम घटकाचा (

    • ) वंशज आहे. पृष्ठावरील सर्व इतर दुवे यादी सूचीचे वंशज नसल्यास हे शैली मिळणार नाही

      एक महत्वाची गोष्ट म्हणजे लक्षात ठेवा की आपल्या वंशशैलीच्या निवडक भाषेमध्ये आपण वापरत असलेल्या टॅग्जमध्ये किती टॅग असतात हे महत्त्वाचे नाही. पहिल्या घटकामध्ये दुसरा घटक कुठेही जोडला असेल तर तो वंशज म्हणून निवडला जाईल.

      आपण उल घटक पासून descended सर्व अँकर निवडा करू इच्छित असल्यास, आपण लिहू इच्छित:

      ul a {text-decoration: none; }

      आता, या शैली एखाद्या सूची आयटमचे वंशज असलेल्या कोणत्याही लिंकवर लागू होतील. आपण हे निवडक देखील लिहू शकता

      ul li a {text-decoration: none; }

      हा एक वंशवर्ग निवडणारा आहे जो दोनपेक्षा जास्त प्रकारच्या निवडकांचा वापर करतो. या प्रकरणात, हे यादी-आयटमच्या आत आणि अतारांकित सूचीच्या आत असलेल्या दुव्यावर लागू होते.

      क्लास निवडकर्ता आणि आयडी निवडकर्त्यांचा वापर करणे

      आपण ज्या उतरत्या क्रमाने उतरत आहात त्या सदस्यांना नेहमीच टाइप वारंट्स नसतात. उदाहरणार्थ, कल्पना करा की आपल्याकडे "बिलबोर्ड" चे ID विशेषता असलेल्या साइटचे एक क्षेत्र (जसे की विभागात) होता. आपण त्या ID वरून एक संतती निवडक सेट करू शकता:

      #billboard ul {background-color: #ccc; }

      हे "बिलबोर्ड" च्या आयडीसह एखाद्या घटकाचा वंशवती असणारी यादीबद्ध नसलेली सूची प्रदर्शित करेल. आपण वर्ग मूल्यां साठी हेच करू शकता.

      div.billboard ul {background-color: #ccc; }

      असे गृहीत धरते की विभागात "बिलबोर्ड" चे वर्ग मूल्य आहे. वरील सीएसएस ह्या श्रेणी मूल्याच्या कोणत्याही विभाजनाच्या आत

      घटक शैली करेल.

      आपण वर्डिकल असोसिएशन्ससह खरोखर जड-हातम आणि वर्बोस मिळवू शकता. उदाहरणार्थ, जर आपण आपला HTML कोड लिहिण्यासाठी ड्रीमइव्हर वापरत असाल तर, जेव्हा आपण नवीन सीएसएस नियम जोडता तेव्हा त्यात एक पर्याय असतो जो त्या पृष्ठावर आपल्या कर्सरच्या स्थानावर आधारित निवडक स्वयं-तयार करेल. या उदाहरणात Dreamweaver काय करीत आहे ते एक अवाढव्य शब्दशः आणि लांब वस्तूंवर निवडणारा तयार करतो. आपल्या सीएसएस कामकाजासाठी ही किती विशिष्टता आवश्यक नाही. आपण काय करू इच्छिता हे वंशवाचक निवडकर्ता दरम्यान संतुलन शोधले जाते जे विशिष्ट आहे जेणेकरून आपल्याला आवश्यक असलेल्या अचूक घटकांपासून ते ड्रिल करु शकतील (स्टायिंग विषयावर ज्या आपण प्रभावित करू इच्छित नसता) सीएसएस नियम नसलेले आहेत जे फारच अधिक निवडक आहेत मोठ्या