Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

प्रत्येक

तत्व को स्टाइल करें जो CSS के साथ अपने माता-पिता का एकमात्र बच्चा है

<घंटा/>

प्रत्येक

तत्व को स्टाइल करने के लिए CSS :only-child चयनकर्ता का उपयोग करें जो उसके माता-पिता का एकमात्र बच्चा है।

उदाहरण

आप :only-child चयनकर्ता को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:only-child {
            background: orange;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <div>
         <p>This is a paragraph.</p>
      </div>
      <div>
         <p>This is a paragraph.</p>
         <p>This is a paragraph.</p>
         <p>This is a paragraph.</p>
      </div>
   </body>
</html>

आउटपुट

प्रत्येक  p 
 तत्व को स्टाइल करें जो CSS के साथ अपने माता-पिता का एकमात्र बच्चा है


  1. प्रत्येक  p 
 तत्वों को स्टाइल करें जो CSS के साथ अपने माता-पिता का अंतिम बच्चा है प्रत्येक <p> तत्वों को स्टाइल करें जो CSS के साथ अपने माता-पिता का अंतिम बच्चा है

    प्रत्येक तत्वों को स्टाइल करने के लिए जो उसके माता-पिता का अंतिम बच्चा है, CSS :last-child चयनकर्ता का उपयोग करें। आप :last-child चयनकर्ता को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण p:last-child { बैकग्राउंड:ऑरेंज; } यह डेमो टेक्स्ट1 है। यह डेमो टेक्स्ट2 है। यह डेमो टेक्

  1. प्रत्येक  p 
 तत्व को स्टाइल करें जो उसके माता-पिता का बच्चा है, सीएसएस के साथ अंतिम बच्चे से गिना जाता है प्रत्येक <p> तत्व को स्टाइल करें जो उसके माता-पिता का बच्चा है, सीएसएस के साथ अंतिम बच्चे से गिना जाता है

    CSS :nth-last-child(n) चयनकर्ता का उपयोग प्रत्येक तत्व को स्टाइल करने के लिए करें जो कि उसके माता-पिता का बच्चा है, जो अंतिम बच्चे से गिना जाता है। आप :nth-last-child(n) चयनकर्ता को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण p:nth-last-child(4) { बैकग्राउंड:नीला; रंग सफेद; }

  1. सीएसएस के साथ एक घंटा तत्व कैसे शैलीबद्ध करें? सीएसएस के साथ एक घंटा तत्व कैसे शैलीबद्ध करें?

    CSS के साथ hr एलिमेंट को स्टाइल करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <style>    body{       font-family: 'Segoe UI',