Đôi khi khi chúng tôi tạo CSS của mình, chúng tôi muốn nhắm mục tiêu một phần tử nhất định. Giả sử chúng ta có một tài liệu HTML chứa đầy <div> thẻ và <span> nhưng chỉ muốn nhắm mục tiêu đầu tiên của mỗi loại để tạo kiểu cho nó theo một cách nào đó. Chúng tôi có thể làm điều đó với cái được gọi là:lớp giả đầu tiên của loại.
Lớp giả là một cách để bộ chọn CSS có các kiểu cụ thể khác với các kiểu ban đầu đã cho. Điều này phụ thuộc vào trạng thái của phần tử. Trong trường hợp này, chúng tôi muốn chọn <div> đầu tiên và <span> đầu tiên vì vậy chúng tôi có thể tạo kiểu cho nó - không có nhịp hoặc div nào khác sẽ được chọn.
Đây là một ví dụ để bạn bắt đầu:
<html>
<head>
<style>
body {
display: flex;
flex-flow: row wrap;
}
div {
height: 100px;
width: 200px;
border: 1px solid black;
margin: 20px;
padding: 20px;
}
/* First of type */
div:first-of-type {
background: purple;
color: white;
}
div span:first-of-type {
color: red;
text-decoration: underline;
background: lightblue;
}
</style>
</head>
<body>
<div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div>
<div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div>
<div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div>
</body>
</html>
Ở đây chúng ta có một tập hợp các div và nhịp bên trong các div đó. Bộ chọn CSS div:first-of-type chỉ chọn phần tử đầu tiên của kiểu và tạo kiểu cho nó. div span:first-of-type chọn khoảng đầu tiên trong mỗi div vì div là phần tử mẹ.
div:first-of-type sẽ giống như nói div:nth-child(1)
Kết luận
Trong bài viết này, chúng tôi đã xem xét:lớp giả kiểu đầu tiên. Chúng tôi thấy rằng một lớp giả về cơ bản chỉ là một thứ mô tả trạng thái mà chúng tôi muốn bộ chọn CSS ở trong khi chúng tôi tạo kiểu cho nó. Chúng tôi cũng đã xem xét cú pháp chung. Tôi khuyên bạn nên xem xét các bộ chọn giả khác và cũng có cảm nhận về chúng!