CSS में :first-child स्यूडो-क्लास

CSS :first-child स्यूडो-क्लास एक ऐसे एलिमेंट को चुनती है जो किसी अन्य एलिमेंट का पहला चाइल्ड एलिमेंट होता है।

सिंटैक्स

निम्नलिखित सिंटैक्स है:

:first-child{    /*declarations*/ }

उदाहरण

आइए CSS first-child स्यूडो क्लास का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> table {    margin: auto;    padding: 10px;    border: hsl(54, 100%, 50%) solid 13px;    border-radius: 6px;    text-align: center; } td, th {    border-left: 2px solid black;    border-top: 3px solid black; } td:first-child, th:first-child {    border-left: none; } th {    background-color: lightblue;    border-top: none; } caption {    margin-top: 3px;    background-color: purple;    caption-side: bottom;    color: white;    border-radius: 20%; } </style> </head> <body> <table> <caption>MCA Syllabus</caption> <tr> <th colspan="4">Subjects</th> </tr> <tr> <td>C</td> <td>C++</td> <td>Java</td> <td>C#</td> </tr> <tr> <td>MySQL</td> <td>PostgreSQL</td> <td>MongoDB</td> <td>SQLite</td> </tr> </table> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

first-child स्यूडो क्लास सेलेक्टर का उपयोग करने से पहले:

first-child स्यूडो क्लास सेलेक्टर का उपयोग करने के बाद:

एक और उदाहरण

आइए CSS first-child स्यूडो क्लास का एक और उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> * {    font-size: 1.1em;    list-style: circle; } li:first-child {    background-color: seashell;    font-family: cursive; } li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; } li:last-child {    background-color: springgreen;    font-family: "Gigi", Arial; } </style> </head> <body> <h2>Apache Spark</h2> <ul> <li>Apache Spark is a lightning-fast cluster computing technology, designed for fast computation. </li> <li>It is based on Hadoop MapReduce.</li> <li>It extends the MapReduce model to efficiently use it for more types of computations. </li> </ul> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा: