# Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 2)

## Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 2)

Bài đăng này đã không được cập nhật trong 4 năm

<figure><img src="https://images.viblo.asia/6a8e3094-1c53-480c-977d-fbe278e28c45.jpg" alt=""><figcaption></figcaption></figure>

Hello anh em, mình tiếp tục trở lại với series về thủ thuật CSS đây.

#### 1. Select Items Using Negative nth-child <a href="#id-1-select-items-using-negative-nth-child-0" id="id-1-select-items-using-negative-nth-child-0"></a>

Chúng ta chỉ thường hay sử dụng `nth-child` để chọn các phần tử ở các vị trí như:

* `:nth-child(2)`: Chọn phần tử thứ 2
* `:nth-child(2n)`: Chọn phần tử thứ 2, 4, 6, 8....
* `:nth-child(2n + 1)`: Chọn phần tử thứ 1, 3, 5, 7...

Thế thì làm sao để chọn **phần tử nằm trong 1 khoảng** hoặc là chọn hết **tất cả phần tử ngoại trừ 1 khoảng**.

Ok tips ở đây là chúng ta sẽ dùng `nth-child` với số âm để có được kết quả:

* `:nth-child(-n + 5)`: Chọn phần tử từ 1 đến 5
* `:not(:nth-child(-n + 5))`: Chọn tất cả phần tử ngoại trừ từ 1 đến 5
* `:nth-child(n + 3):nth-child(-n + 7)`: Chọn phần tử từ 3 đến 7

#### 2. Equal-Width Table Cells <a href="#id-2-equal-width-table-cells-1" id="id-2-equal-width-table-cells-1"></a>

Đây là thuộc tính mà mình mới biết được gần đây trong khi tìm cách chia đều `width` cho các cột trong table. Chỉ cần 1 thuộc tính đơn giản là:

```css
table {
  table-layout: fixed;
}
```

#### 3. Avoid Collapsing Margins <a href="#id-3-avoid-collapsing-margins-2" id="id-3-avoid-collapsing-margins-2"></a>

**Collapsing Margins** là cách mà trình duyệt hành xử với layout khi có 2 component liền kề nhau, component A có `margin-bottom` lớn hơn `margin-top` của component B thì khoảng cách giữa 2 component sẽ bằng giá trị của `margin-bottom`

A có `margin-bottom` là `30px`, B có `margin-top` là `20px`. Vậy thì khoảng cách giữa 2 khối này sẽ là `30px`, chứ không phải là `50px`

```

<div class="A">Component A</div>
<div class="B">Component B</div>


div {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  font-weight: bold;
}

.A {
  background-color: #A16FB3;
  border-radius: 5px;
  border: 2px solid black;
  margin-bottom: 30px;
}

.B {
  background-color: #F7964A;
  border-radius: 5px;
  border: 2px solid black;
  margin-top: 30px;
}
```

Và để tránh tình trạng này xảy ra, cách mà mình hay áp dụng đó là **Single-direction margin declarations**, nghĩa là khai báo `margin` theo 1 hướng là **top** hoặc là **bottom** cho các component trên trang, cách này giúp mình dễ dàng kiểm soát được khoảng cách giữa các component.

Tuy nhiên vẫn sẽ có những trường hợp không thể tránh khỏi nếu chúng ta dùng thêm các libs CSS vào project, nhưng chỉ cần biết về `Collapsing Margins` thì chúng ta sẽ chú ý và tìm cách chỉnh CSS để mà layout chuẩn như bản design.

#### 4. Use Pointer Events to Control Mouse Events <a href="#id-4-use-pointer-events-to-control-mouse-events-3" id="id-4-use-pointer-events-to-control-mouse-events-3"></a>

[pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) là thuộc tính mình mới tìm hiểu kỹ hơn gần đây.

Trong một tình huống style CSS cho thẻ button có trạng thái `disabled` thì bị ảnh hưởng CSS cho trạng thái `hover`

Thay vì đi override style trạng thái `hover` cho button disabled và thay đổi kiểu con trỏ chuột, thì chỉ cần sử dụng thuộc tính `pointer-events: none` là đủ.

Xem thêm demo dưới để hiểu hơn về sức mạnh của thuộc tính này:

```

<button>Button normal</button>
<hr/>
<button class="before" disabled="disabled">Button have no pointer-events</button>
<hr/>
<button class="after" disabled="disabled">Button using pointer-events</button>

button {
  border: 0;
  padding: 8px 20px;
  background-color: #eee;
  
  &:hover {
    background-color: yellow;
    cursor: pointer;
  }
  
  // Must have a lot of CSS style for disabled state  
  &.before {
    cursor: auto;
    background-color: #eee;
  }
  
  // Just a property  
  &.after {
    pointer-events: none;
  }
}
```

## Tổng kết <a href="#tong-ket-4" id="tong-ket-4"></a>

Những kiến thức ở trên đều là do làm dự án nhiều, va chạm nhiều trường hợp layout nên mình mới lượm được. Hi vọng giúp được ai đó!

**P/s: Xin nhắc lại là tiêu đề câu view nhé! Anh em Frontend pro rồi đừng chém em ạ!**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learncss.gitbook.io/cssadvand/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.