CSS 퍼스트 오브 클래스
CSS :first-of-type 선택기는 요소 그룹에서 해당 유형의 첫 번째 요소를 선택하는 데 사용됩니다. 예를 들어 단락 그룹이 있는 경우 :first-of-type 선택기는 그룹의 첫 번째 단락을 선택합니다.
이 선택기는 종종 특정 요소를 선택하기 위해 자식 선택기와 같은 다른 선택기와 함께 사용됩니다. 예를 들어 다음 코드는 페이지의 첫 번째 div 요소에서 첫 번째 단락을 선택합니다.
div:first-child > p:first-of-type {
/* CSS code */
}
CSS 퍼스트 오브 클래스란?
CSS 선택기는 스타일을 지정할 요소를 선택합니다.
가장 기본적인 선택기는 태그 이름으로 요소를 선택하는 데 사용되는 요소 선택기입니다. 예를 들어 요소 선택기 p는 페이지의 모든 <p> 요소를 선택합니다.
클래스 선택기는 클래스 이름으로 요소를 선택하는 데 사용됩니다. 예를 들어 클래스 선택자 .example은 example 클래스가 있는 모든 요소를 선택합니다.
id 선택자는 id로 요소를 선택하는 데 사용됩니다. 예를 들어 id 선택기 #example은 id = "example"인 요소를 선택합니다.
example 클래스가 있는 첫 번째 부분을 선택하려면 CSS 선택기 example: first를 사용합니다.
클래스 선택기가 있는 첫 번째 요소는 지정된 클래스가 있는 첫 번째 요소를 선택하는 데 사용됩니다. 예를 들어 첫 번째 <p> 요소의 스타일을 test 클래스로 지정하려면 다음과 같은 클래스 선택기와 함께 첫 번째 요소를 사용합니다.
p.test:first-child {
클래스 선택기가 있는 첫 번째 요소는 특정 클래스가 있는 첫 번째 요소의 스타일을 해당 클래스가 있는 다른 요소와 다르게 지정하려는 경우에 유용합니다. 이것은 종종 다른 목록 항목과 다르게 목록의 첫 번째 요소의 스타일을 지정하는 데 사용됩니다.
예제 코드:
<head>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
CSS 퍼스트 오브 클래스 구현
몇 가지 다른 방법으로 클래스의 CSS를 구현할 수 있습니다.
가장 일반적인 방법은 HTML 문서의 다른 코드 앞에 CSS 코드를 삽입하는 것입니다. 이렇게 하면 CSS 코드가 먼저 구문 분석되고 다른 코드보다 우선합니다.
클래스의 첫 번째 CSS를 구현하는 또 다른 방법은 외부 CSS 파일을 사용하는 것입니다.
CSS를 사용할 때 가장 먼저 해야 할 일은 스타일을 지정하려는 요소를 선택하는 것입니다. 요소의 id, class 또는 tag를 사용할 수 있습니다.
요소를 선택한 후에는 CSS 속성을 사용하여 스타일을 지정할 수 있습니다. 예를 들어 color 속성을 사용하여 요소의 색상을 변경하거나 font-size 속성을 사용하여 요소의 글꼴 크기를 변경할 수 있습니다.
예제 코드:
<html>
<head>
<style>
p:first-of-type {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
<p>The third paragraph</p>
<p>The fourth paragraph</p>
</body>
</html>
결론
클래스가 있는 첫 번째 요소를 선택하는 방법에는 여러 가지가 있지만 CSS 선택기 first-child를 사용하는 것이 가장 일반적입니다. 이 선택기는 선택한 요소의 자식인 모든 유형의 첫 번째 요소를 선택합니다.
항목 목록이 있고 item 클래스가 있는 첫 번째 항목을 선택하려는 경우 ul > li:first-child CSS 선택기를 사용합니다. 따라서 이 블로그에서 클래스의 첫 번째 CSS에 대한 완전한 정보를 얻을 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn