Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS의 :first-child 의사 클래스

<시간/>

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 의사 클래스

첫 번째 자식 의사 클래스 선택기를 사용한 후 -

CSS의 :first-child 의사 클래스

예시

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>

출력

이것은 다음과 같은 출력을 생성합니다 -

CSS의 :first-child 의사 클래스