CSS class selectors là một trong những công cụ linh hoạt nhất. Chúng nằm trong bộ công cụ phát triển front-end của bạn. Chúng cho phép bạn áp dụng các kiểu cho nhiều phần tử trên một trang web. Điều này đảm bảo thiết kế của bạn nhất quán và dễ bảo trì.
Cú pháp
.class-name{
property: value;
}. Basic class selector
Bộ chọn class cơ bản áp dụng các kiểu cho tất cả các phần tử có tên class được chỉ định. Hãy sử dụng dấu chấm (.) trước tên class trong CSS.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="highlight">This text is highlighted.</p>
<p>This text is not highlighted.</p>
</body>
</html>
<!--Driver Code Ends-->
. Multiple Class Selectors
Bộ chọn nhiều class chỉ áp dụng các kiểu cho các phần tử có tất cả các class được chỉ định. Phân tách tên class bằng dấu chấm.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box.round {
border-radius: 10px;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box round">This is a rounded box.</div>
<div class="box">This box is not rounded.</div>
</body>
</html>
<!--Driver Code Ends-->
. Chaining Class Selectors with Other Selectors
Bạn có thể kết hợp bộ chọn class với bộ chọn phần tử hoặc bộ chọn giả (pseudo-class) để nhắm mục tiêu cụ thể hơn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p.important {
color: red;
font-size: 18px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="important">This is an important paragraph.</p>
<p>This paragraph is not styled.</p>
</body>
</html>
<!--Driver Code Ends-->
. Global Class Application
Bộ chọn toàn cầu với một class cho phép bạn nhắm mục tiêu tất cả các phần tử có class được chỉ định.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*.notice {
color: blue;
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 class="notice">Notice this heading.</h1>
<p class="notice">This is a noticed paragraph.</p>
</body>
</html>
<!--Driver Code Ends-->
. Combining Multiple Class Names
Một phần tử có thể có nhiều tên class và các kiểu của mỗi class sẽ kết hợp với nhau.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="text-bold text-italic">This text is bold and italic.</p>
</body>
</html>
<!--Driver Code Ends-->
. Targeting Nested Elements with Class Selectors
Bạn có thể áp dụng các kiểu cho các phần tử bên trong một class cha bằng cách sử dụng bộ chọn hậu duệ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container p {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<p>This paragraph is inside a container.</p>
</div>
<p>This paragraph is outside the container.</p>
</body>
</html>
<!--Driver Code Ends-->
. Overriding Class Styles
Sử dụng nhiều class trên một phần tử để ghi đè các kiểu cụ thể được xác định trong các class trước đó.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.button {
padding: 10px;
background-color: gray;
}
.primary {
background-color: blue;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button class="button primary">Primary Button</button>
</body>
</html>
<!--Driver Code Ends-->
. Using Class Selectors with Media Queries
Bộ chọn class có thể được sử dụng trong media queries để làm cho các kiểu phản hồi.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.responsive {
font-size: 16px;
}
@media (max-width: 600px) {
.responsive {
font-size: 12px;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p class="responsive">Resize the browser window to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends-->