CSS :first-child 의사 클래스는 다른 요소의 첫 번째 자식 요소인 요소를 선택합니다.
구문
다음은 구문입니다 -
:first-child{ /*declarations*/ }
예시
CSS first-child Pseudo 클래스의 예를 살펴보겠습니다 −
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -
첫 번째 자식 의사 클래스 선택기를 사용하기 전에 -
첫 번째 자식 의사 클래스 선택기를 사용한 후 -
예시
CSS first-child Pseudo 클래스의 또 다른 예를 봅시다 -
<!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>
출력
이것은 다음과 같은 출력을 생성합니다 -