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

CSS से पैरेंट के पहले <p> एलिमेंट को स्टाइल करें

:first-of-type सेलेक्टर का उपयोग

:first-of-type सेलेक्टर अपने पैरेंट के अंदर **अपने टाइप का पहला** एलिमेंट को सिलेक्ट करता है। यह :first-child से अलग है जो किसी भी टाइप के पहले चाइल्ड को चुनता है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:first-of-type {
        background: orange;
      }
    </style>
  </head>
  <body>
    <p>This is demo text1.</p>
    <p>This is demo text2.</p>
  </body>
</html>

यहां पहला <p> स्टाइल होगा, भले ही उसके पहले कोई <h1> या अन्य टैग हो।

  1. CSS से अंतिम चाइल्ड से गिनती करके nth <p> एलिमेंट को स्टाइल करें CSS से अंतिम चाइल्ड से गिनती करके nth <p> एलिमेंट को स्टाइल करें

    :nth-last-child(n) सेलेक्टर का उपयोग यह सेलेक्टर पैरेंट के अंतिम चाइल्ड से गिनती करके nth चाइल्ड को सिलेक्ट करता है, चाहे उसका टाइप कुछ भी हो। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-last-child(4) { background: blue; color: white;

  1. CSS से केवल चाइल्ड वाले पैरेंट के <p> एलिमेंट को स्टाइल करें CSS से केवल चाइल्ड वाले पैरेंट के <p> एलिमेंट को स्टाइल करें

    :only-child सेलेक्टर का उपयोग :only-child सेलेक्टर उस एलिमेंट को सिलेक्ट करता है जो अपने पैरेंट का **एकमात्र चाइल्ड** हो (कोई अन्य चाइल्ड न हो, किसी भी टाइप का)। उदाहरण <!DOCTYPE html> <html> <head> <style> p:only-child { background: orange; } &

  1. CSS से hr एलिमेंट स्टाइल करना CSS से hr एलिमेंट स्टाइल करना

    hr स्टाइलिंग CSS से <hr> एलिमेंट को स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <meta name=viewport content=width=device-width, initial-scale=1> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20