# Tìm hiểu về vùng chọn cơ bản (Selector)

**Vùng chọn trong CSS** đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn là kỹ thuật quan trọng đầu tiên khi bạn sử dụng CSS.

Vùng chọn trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ `<body>` đi sâu vào các thẻ bên trong nó. Ở bài này mình sẽ nói qua các kiểu sử dụng vùng chọn cơ bản nhất vì bạn sẽ sử dụng nó thường xuyên nhất.

### Vùng chọn là gì?

Trong CSS, vùng chọn nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì vùng chọn của bạn sẽ là h1.

**Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML.**

### Các loại vùng chọn cơ bản

#### **Vùng chọn dựa vào tên thẻ**

Kiểu vùng chọn này là đơn giản nhất, đó là nó sẽ **chọn toàn bộ các phần tử trên tài liệu HTML dựa vào tên thẻ** có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối style cho toàn bộ thẻ `h1` trong website thì sẽ có đoạn CSS sau với vùng chọn `h1`.

Code CSS file name.css

```css
h1 {
  color: red;
}
```

**Code HTML**

```html
<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>Inline Styles</title>
     <link rel="stylesheet" href="name.css" />
  </head>

  <body>
    <h1>Tiêu đề thứ nhất</h1>
    <p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
    <h1>Tiêu đề thứ hai</h2>
  </body>
</html>
```

Dĩ nhiên với kiểu sử dụng vùng chọn này thì toàn bộ các thẻ HTML trong website được chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết CSS cho một khu vực độc lập.

#### **Vùng chọn dựa vào ID**

Vùng chọn dựa vào ID (*tên định danh*) nghĩa là bạn có thể chọn một phần tử cụ thể dựa vào giá trị của thuộc tính `id` trong thẻ HTML. Sở dĩ vùng chọn id được sử dụng để chọn một phần tử cụ thể là vì trên một trang tài liệu HTML thì **mỗi phần tử phải mang một id riêng biệt không trùng nhau**.

Id được thiết lập dựa vào thuộc tính `id` trong thẻ HTML và bất cứ thẻ nào cũng có thể sử dụng id. Khi viết tên id vào CSS thì nó phải có dấu thăng (`#tên-id`) đặt trước tên id để phân biệt với các loại vùng chọn khác. Ví dụ:

Code css

```css
#post-title {
  color: blue;
}
```

Code HTML

```html
<h1 id="post-title">Tiêu đề có thiết lập ID</h1>
<h1>Tiêu đề thông thường</h1>
```

Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ `h1` nhưng mình muốn viết CSS cho một thẻ `h1` cụ thể nào đó thì sẽ đặt id riêng cho phần tử mà mình cần viết CSS thay vì sử dụng vùng chọn dựa theo tên thẻ.

Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử dụng id đó như `h1#post-title`, lưu ý là phải viết sát nhau.

Hãy lưu ý rằng, một thẻ có thể sẽ chứa nhiều id khác nhau và mỗi tên id sẽ được cách nhau bởi khoảng trắng như thế này.

```html
<h1 id="post-title sticky">Hello</h1>
```

#### **Vùng chọn dựa vào Class**

Class (*lớp*) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của class là một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì chỉ được sử dụng một lần duy nhất cho một phần tử.

Class được khai báo trong một phần tử HTML bởi thuộc tính class như `<h1 class="tên-class">`. Khi khai báo vùng chọn class trong CSS, thì tên class phải được đặt sau dấu chấm (`.tên-class`). Ví dụ về cách sử dụng class linh hoạt:

Code css:&#x20;

```css
.sticky {
  color: red;
}
```

Code HTML

```html
<h1 class="sticky">Tiêu đề quan trọng</h1>
<h1>Tiêu đề thông thường</h1>
<h1 class="sticky">Tiêu đề quan trọng</h1>
```

Cũng giống như id, class cũng có thể được viết kèm theo tên thẻ kiểu h1.sticky và phải viết liền nhau.

#### **Vùng chọn theo thứ cấp**

Kiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho website đó là chọn phần tử theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó.

Ví dụ mình có một đoạn HTML thế này:

```html
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
</ul>
```

Như ở đoạn trên, mình có hai danh sách với thẻ `<ul>` mang 2 id khác nhau. Bây giờ mình muốn viết CSS cho các thẻ `<li>` trong cái danh sách `#menu` thì làm thế nào? Nếu bạn viết vùng chọn dựa theo tên thẻ thì các thẻ \<li> ở #social cũng sẽ được áp dụng mà mình không muốn vậy, hoặc đặt class hay ID cho các thẻ li cũng không phải là cách hay. Lúc này, chúng ta sẽ sử dụng đến **vùng chọn thứ cấp**.

Để chọn các thẻ `<li>` bên trong `#menu`, mình sẽ viết vùng chọn là `#menu li` thay vì chỉ viết `li` trong CSS. Lúc này CSS sẽ hiểu rằng chúng ta muốn chọn tất cả các thẻ `<li>` nằm bên trong phần tử mang `#menu`.

Code CSS

```css
#menu li {
  color: red;
  list-style-type: square;
}
```

#### **Vùng chọn theo thứ cấp liền nhau**

Đây cũng là một kiểu vùng chọn dựa theo thứ cấp, cũng giúp bạn chọn các phần tử bên trong một phần tử nào đấy nhưng nó sẽ chỉ áp dụng cho các phần từ nằm dưới nó một bật. Bây giờ mình có cái danh sách hai cấp bật như sau:

```
<nav id="menu">
<ul>
<li>Menu 1
<ul>
<li>Menu 1.a</li>
<li>Menu 1.b</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
```

Nếu mình muốn viết CSS cho các thẻ `<li>` của *Menu 1.a, Menu 1.b* thì mình sẽ đặt vùng chọn là `#menu ul ul > li`. Nếu diễn giải bằng chữ thì nó sẽ chọn thẻ \<li> nằm trong thẻ \<ul> ở bật thứ hai và thẻ \<ul> đó nằm trong id #menu. Bạn để ý là với ví dụ trên mình có tới hai thẻ \<ul>.

```css
#menu ul ul > li {
  color: blue;
}
```

Thường thì cách viết vùng chọn này bạn sẽ sử dụng khi tạo menu đổ xuống trong website.
