Bộ chọn trong CSS - CSS Selectors

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    9 thg 9, 2022

  • Số lượt xem

    1419 lượt xem


Một selector trong CSS sẽ chọn những phần tử HTML mà bạn muốn style.

CSS Selectors

Một selector được sử dụng để tìm (hoặc chọn) những phần tử HTML mà bạn muốn style.

Chúng ta có thể chia CSS selector thành 5 loại:

  • Những selector đơn giản: chọn những phần tử dựa trên tên(name), id hoặc lớp(class)

  • Những selector kết hợp:chọn những phần tử dựa trên mối quan hệ giữa chúng

  • Những selector lớp giả (pseudo-class ): chọn những phần tử dựa trên trạng thái nào đó

  • Những selector phần tử giả (pseudo-elements): chọn những phần tử là một phần của phần tử khác

  • Những selector thuộc tính (chọn những phần tử dựa trên thuộc tính của chúng)

Bài học này sẽ giải thích về các selector cơ bản trong CSS.

Selector phần tử trong CSS

Selector phần tử sẽ chọn ra những phần tử HTML dựa trên tên của chúng.

Ví dụ

Ở đây, tất cả những thẻ <p> trên trang sẽ được căn giữa với màu chữ đỏ: 

p {    text-align: center;    color: red;  }

 

Selector id trong CSS

Selector id sử dụng thuộc tính id của thẻ HTML để trỏ đến phần tử được chỉ định.

Không tồn tại hai thẻ có cùng một id trong trang, vì vậy id được dùng để chọn duy nhất một thẻ!

Để chọn thẻ bằng id, ta dùng dấu # theo sau là id của thẻ.

Ví dụ

Dưới đây là cách để chọn một thẻ có id="para1": 

#para1 {    text-align: center;    color: red;  }

 

Chú ý: tên của id không bắt đầu bằng một chữ số!

Selector class trong CSS

Selector class chọn thẻ HTML bằng thuộc tính class của thẻ.

Để chọn thẻ với class chỉ định, ta viết dấu (.) theo sau là tên class.

Ví dụ

Trong ví dụ này, tất cả các thẻ có class là center sẽ được căn giữa với màu chữ đỏ: 

.center {    text-align: center;    color: red;  }

 

Bạn có thể chọn những thẻ HTML có class chỉ định.

Ví dụ

Trong ví dụ này, chỉ những thẻ <p> có class center mới được căn giữa và có chữ đỏ: 

p.center {    text-align: center;    color: red;  }

 

Một thẻ HTML có thể có nhiều class.

Ví dụ

Trong ví dụ này, thẻ <p> sẽ có hai class là center và large: 

<p class="center large">This paragraph refers to two classes.</p>

 

Chú ý:Tên của class không  bắt đầu bằng chữ số!

 

Selector toàn bộ trong CSS

Selector toàn bộ (*) sẽ chọn tất cả các thẻ HTML trong trang.

Ví dụ

Câu lệnh CSS dưới đây ảnh hưởng toàn bộ phần tử có trong trang: 

* {    text-align: center;    color: blue;  }

 

Selector gom nhóm trong CSS

Selector gom nhóm sẽ chọn những phần tử có cùng style.

Nhìn đoạn code CSS bên dưới, thẻ <h1>, <h2> và <p> có cùng style:

h1 {    text-align: center;    color: red;  }    h2 {    text-align: center;    color: red;  }    p {    text-align: center;    color: red;  }

Sẽ tốt hơn nếu ta gom nhóm những selector này lại, giúp giảm thiểu những dòng code.

Để gom nhóm nhiều selector, ta viết chúng cách nhau bởi dấu phẩy.

Ví dụ

Ở ví dụ này, ta sẽ gom nhóm những selector từ đoạn code ở trên: 

h1, h2, p {    text-align: center;    color: red;  }

 

All CSS Simple Selectors

Selector Example Example description
#id #firstname Chọn thẻ có id là firstname
.class .intro Chọn những thẻ có class là intro
element.class p.intro Chọn những thẻ <p> có class là intro
* * Chọn tất cả các thẻ có trong trang
element p Chọn tất cả thẻ <p> có trong trang
element, element,... div, p Chọn tất cả thẻ <div> và tất cả thẻ <p>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.