Các bộ Selector trong CSS

Bộ chọn (Selector) được sử dụng để xác định các phần tử HTML được tác động bởi giá trị của thuộc tính CSS đó.

Bộ chọn (Selector) được chia thành 5 loại:

Bộ chọn đơn giản (chọn các phần tử dựa trên tên thẻ (tag), id, class)
Bộ chọn bộ kết hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng)
Bộ chọn lớp giả (chọn phần tử dựa trên một trạng thái nhất định)
Bộ chọn phần tử giả (chọn và tạo kiểu cho một phần của phần tử)
Bộ chọn thuộc tính (chọn các phần tử dựa trên một thuộc tính hoặc giá trị thuộc tính)

1. Bộ chọn đơn giản (Simple selectors)

Selector ID

Sử dụng thuộc tính id của phần tử HTML để làm bộ chọn chọn một phần tử cụ thể. Id của phần tử duy nhất trong một trang. Nó giúp bạn chọn được một phần tử duy nhất muốn tác động tới.

Cú pháp:

Với id, bạn phải bắt đầu bằng dấu #

#id{
  thuộc tính: giá trị;
}

Ví dụ: Quy tắc CSS dưới đây sẽ được áp dụng cho phần tử HTML có id="thu_do"

<!DOCTYPE html>
<html>
<head>
	<title>Trở thành cao thủ HTML & CSS</title>
	<style type="text/css">
		#thu_do{
			color: red;
		}
	</style>
</head>
<body>
	<ul>
		<li id="thu_do">Hà nội</li>
		<li>Hải dương</li>
		<li>Đà nẵng</li>
		<li>Thành phố Hồ chí minh</li>
	</ul>
</body>
</html>

Selector ClassName

Sử dụng thuộc tính class của phần tử HTML để làm bộ chọn chọn tập hợp các phần tử có cùng class đó. Hiểu đơn giản hơn, nếu khi bạn muốn tác động css lên nhiều phần tử khác nhau, thay vì đặt id bạn hoàn toàn có thể đặt class.

Để chọn các phần tử với một class cụ thể, bắt đầu bằng kí tự dấu chấm (.) và theo sau là tên của class.

Cú pháp:

.class{
    thuộc tính: giá trị;
}

Ví dụ: Tất cả phần tử HTML có class .mien_bac sẽ nhận màu đỏ, class .mien_nam sẽ nhận màu xanh

<!DOCTYPE html>
<html>
<head>
	<title>Trở thành cao thủ HTML vs CSS</title>
	<style type="text/css">
		.mien_bac{
			color: red;
		}
		.mien_nam{
			color:blue;
		}
	</style>
</head>
<body>
	<ul>
		<li class="mien_bac">Hà Nội</li>
		<li class="mien_bac">Hải Dương</li>
		<li class="mien_nam">Đà Nẵng</li>
		<li class="mien_nam">Thành phố Hồ Chí Minh</li>
	</ul>
</body>
</html>

Selector TagName

Sử dụng tên của thẻ HTML để làm bộ chọn chọn ra các phần tử có cùng tên thẻ trong trang HTML sẽ bị tác động bởi CSS này.

Cú pháp:

tagName{
    thuộc tính: giá trị;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Trở thành cao thủ HTML và CSS</title>
	<style type="text/css">
		p{
			color: red;
		}
	</style>
</head>
<body>
	<p>Học lập trình tại Zent</p>
</body>
</html>

Selector All

Bộ chọn này cho phép tác động lên tất cả các phần tử của trang HTML.

Cú pháp:

* {
    thuộc tính: giá trị;
}

Ví dụ: Tất cả thành phần đều bị tác động bởi CSS khi sử dụng *

<!DOCTYPE html>
<html>
<head>
<style>
  * {
    text-align: center;
    color: blue;
  }
</style>
</head>
<body>

  <h1>Học lập trình!</h1>
  <p>Lập trình thật dễ</p>
  
</body>
</html>

2. Bộ chọn kết hợp (Combinators selector)

Trong bộ chọn này sử dụng mối quan hệ giữa các phần tử để lấy được phần tử cần tác động. Bộ chọn này chia làm 4 loại như sau:

bộ chọn con cháu (dấu cách)
bộ chọn con trực tiếp (>)
bộ chọn anh em liền kề (+)
bộ chọn anh chị em chung (~)

Bộ chọn con cháu (space)

Loại bộ chọn này cho phép bạn chỉ định các phần tử ảnh hưởng bởi cấp độ cha con. Bộ chọn này sử dụng dấu cách (space) giữa các cấp độ quan hệ.

Cú pháp:

cha con chau...n{
    thuộc tính: giá trị;
}

Ví dụ: Tất cả các thẻ p là con của thẻ div sẽ bị tác động bởi css này

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

  <div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
  </div>
  <p>Thẻ p ngoài thẻ div.</p>
  <p>Thẻ p ngoài thẻ div</p>
  
</body>
</html>

Bộ chọn con trực tiếp (>)

Bộ chọn này xác định tất cả các phần tử là con trực tiếp của phần tử được chỉ định. Sử dụng dấu > để thể hiện mối quan hệ

Cú pháp:

element1 > element2 {
    thuộc tính: giá trị;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <style>
  div > p {
    background-color: yellow;
  }
  </style>
</head>
<body>

  <div>
    <p>Thẻ p thứ 1.</p>
    <p>Thẻ p thứ 2</p>
    <section><p>Thẻ p thứ 3</p></section> 
    <!-- không phải con trực tiếp mà là cháu -->
    <p>Thẻ p thứ 4</p>
  </div>
  
  <p>Thẻ p thứ 5 không thuộc div</p>
  <p>Thẻ p thứ 6 không thuộc div</p>

</body>
</html>

Bộ chọn anh em liền kề (+)

Bộ chọn này xác định 1 phần tử nằm ngay sau phần tử đang chỉ định. Sử dụng dấu + để thể hiện mối quan hệ này.

Cú pháp: Element 2 nằm sau element 1 sẽ bị tác động bởi css

element1 + element 2{
    thuộc tính: giá trị;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <style>
    div + p {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div>
  <p>Thẻ p1 trong thẻ div</p>
  <p>Thẻ p2 trong thẻ div</p>
</div>
<!---> Thẻ p3 sau thẻ div bị tác động bởi background màu vàng. 
Do thẻ p3 là thẻ anh em liền kề sau với thẻ div <--->
<p>Thẻ p3 sau thẻ div</p>
<p>Thẻ p4 sau thẻ div</p>

</body>
</html>

Bộ chọn anh chị em chung (~)

Bộ chọn này có phần tác động rộng hơn so với bộ chọn anh em liền kề phía trên, nó xác định tất cả thành phần anh chị em phía sau phần tử chỉ định. Sử dụng dấu ~ để thể hiện mối quan hệ này.

Cú pháp:

element1 ~ element2{
    thuộc tính: giá trị;
}

Ví dụ: Tất cả phần tử là thẻ p đừng sau thẻ div và ngang hàng với thẻ div đều bị tác động bởi CSS này

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

  <p>Đoạn 1</p>
  
  <div>
    <p>Đoạn 2</p>
  </div>
  <!---> Trong trường hợp này thẻ p của đoạn 3 và đoạn 4 
  sẽ bị tác động bởi CSS và có màu nền là màu vàng.  <--->
  <p>Đoạn 3</p>
  <i>Hello world</i>
  <p>Đoạn 4</p>
  
</body>
</html>

3. Bộ chọn lớp giả

Một lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử. Nó có thể sử dụng để tác động css lên các phần tử khi có các sự kiện thay đổi trạng thái như người dùng di chuột qua (hover), người dùng tập trung (focus) vào một phần tử,....

Cú pháp chung:

selector:pseudo-class {
  thuộc tính: giá trị;
}

Dưới đây là các ví dụ về thẻ liên kết (a) kết hợp với các lớp giả

a:link: Bộ chọn được sử dụng để chọn các liên kết chưa được truy cập

a:visited: Bộ chọn được sử dụng để chọn các liên kết đã được truy cập

a:hover: Bộ chọn được sử dụng khi di chuột vào liên kết

a:active: Bộ chọn được sử dụng khi liên kết đang được truy cập. Bạn có thể click và giữ để thấy rõ sự thay đổi.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <style>
  
  /* visited link */
  a:visited {
    color: green;
  }
  a:link {
    color: red;
  }
  
  /* mouse over link */
  a:hover {
    color: hotpink;
  }
  
  /* selected link */
  a:active {
    color: blue;
  }
  </style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="https://vnua.edu.vn" target="_blank">This is a link</a></b></p>

</body>
</html>

Lưu ý: :hover phải đặt sau :link và :visited; :active phải đặt sau :hover thì mới có tác dụng.

Lớp giả hover với thẻ div

Cú pháp:

div:hover{
    thuộc tính: giá trị;
}

:focus

Cú pháp: Bộ chọn xác định khi focus vào đối tượng selector

selector:focus{
    thuộc tính: giá trị;
}

Ví dụ:

input:focus{
    background: yellow;
}

:first-child

Cú pháp: Bộ chọn xác định phần tử đầu tiên trong tập các phần tử được xác định

selector:first-child{
    thuộc tính : giá trị;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  p:first-child {
    color: blue;
  } 
</style>
</head>
<body>
  <!---> Thẻ p đầu tiên này sẽ được thay đổi màu xanh <--->
  <p>Học lập trình dễ cực</p> 
  <p>Học lập trình tại Zent</p>

</body>
</html>

:last-child

Cú pháp: Bộ chọn xác định phần tử cuối cùng trong tập các phần tử được xác định

selector:last-child{
    thuộc tính : giá trị;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  p:last-child {
    color: blue;
  } 
</style>
</head>
<body>
  
  <p>Học lập trình dễ cực</p> 
  <p>Học lập trình tại Zent</p>
  <!---> Thẻ p cuối cùng này sẽ được thay đổi màu xanh <--->
  <p>Học lập trình sớm để đi làm</p>

</body>
</html>

Ngoài ra còn nhiều lớp giả ít khi sử dụng như :read-only, :read-write, :only-child,...Phần này trong quá trình thực hành gặp phải sẽ được hướng dẫn thêm.

4. Bộ chọn phần tử giả

Bộ chọn này sử dụng để tác động css lên một phần cụ thể trong phần tử xác định. Với bộ chọn phần tử giả sẽ bắt đầu bằng 2 dấu hai chấm (::)

Cú pháp chung:

selector::pseudo-element {
  property: value;
}

Một số phần tử giả thông dụng

::first-letter: Bộ chọn cho phép chọn ra kí tự đầu tiên trong nội dung phần tử xác định

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  p::first-letter {
    color: red;
    font-size: 20px;
  }
</style>
</head>
<body>
  <!---> Chữ "C" đầu tiên trong từ Chào sẽ được nhận css như trên 
  với màu đỏ và kích cỡ chữ là 20px  <--->
  <p>Chào mừng bạn đến với môn học</p>

</body>
</html>

::fist-line: Bộ chọn cho phép chọn ra dòng đầu tiên trong nội dung của phần tử chỉ định

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <style>
    p::first-line {
      color: #ff0000;
      font-variant: small-caps;
    }
  </style>
</head>
<body>
<!---> Dòng đầu tiên sẽ được áp dụng CSS. 
Bạn phải đặt nội dung dài hơn 1 dòng để thấy sự khác biệt<--->

<p>Some more text. And even more, and more, and more, and more,
 and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

::before: Sử dụng để chèn một nội dung vào trước phần tử chỉ định. Tuy nhiên phần tử giả này nằm trong phần tử chỉ định. Đối với phần tử giả này, bạn cần phải đặt thuộc tínhcontent với giá trị có thể là rỗng, url của hình ảnh hoặc nội dung dạng text. Nếu không có thuộc tính content thì phần tử giả này sẽ không xuất hiện.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  h1::before {
    content: "Xin chào, ";
  }
</style>
</head>
<body>

<h1>Tôi là Đăng</h1>
<!--->Kết quả mới của thẻ h1: Xin chào, Tôi là Đăng<--->
</body>
</html>

::after: Ngược lại với ::before, ::after cho phép chèn một nội dung vào sau phần tử chỉ định.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  h1::after {
    content: " !!! ";
  }
</style>
</head>
<body>

<h1>Tôi là Đăng</h1>
<!--->Kết quả mới của thẻ h1: Tôi là Đăng!!! <--->
</body>
</html>

Lưu ý:

Không phải phần tử (thẻ) nào cũng có thể sử dụng ::before, ::after. Một số thẻ không sử dụng được như thẻ ảnh, audio, video,...
Luôn luôn phải có thuộc tính content. Nếu muốn xóa phần tử giả này đi, bạn có thể đặt giá trị của thuộc tính content là none

5. Bộ chọn thuộc tính

Bộ chọn thuộc tính được sử dụng để chọn phần tử có thuộc tính được chỉ định

Bộ chọn [attribute=value]: được sử dụng để chọn phần tử có thuộc tính bằng với giá trị chỉ định

Ví dụ: Các thẻ a có thuộc tính target=_blank sẽ được tác động background-color: yellow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FITA VNUA</title>
  <style>
    a[target="_blank"]{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <a href="https://vnua.edu.vn" target="_blank">Phát triển ứng dụng web</a>
  <a href="https://google.com.vn">google.com</a>
  <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>

Bộ chọn [attribute~=value]: được sử dụng để chọn phần tử có thuộc tính chứa một từ được chỉ định

Ví dụ: Thuộc tính value của thẻ input chứa từ Hello sẽ biến đổi background thành màu vàng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FITA VNUA</title>
  <style>
    input[value~="Hello"]{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <input type="text" value="Hello">
  <input type="text" value="Xin chào">
  <input type="text" value="Helloworld">
</body>
</body>
</html>

Bộ chọn [attribute^=value]: được sử dụng để chọn phần tử có thuộc tính bắt đầu bằng một giá trị được chỉ định

Ví dụ: Thẻ p có class bắt đầu bằng "fita" sẽ được thay đổi màu thành màu đỏ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Học lập trình web</title>
  <style>
    p[class^="fita"]{
      color: red;
    }
  </style>
</head>
<body>
    <p class="fita">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, ducimus.</p>
    <p class="code_fita">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, ducimus.</p>
    <p class="fita_code">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, ducimus.</p>
</body>
</body>
</html>

PreviousCách chèn CSS vào trang Web NextCác thuộc tính định dạng cơ bản trong CSS