CSS Selector

Trong bài này chúng ta sẽ tìm hiểu về CSS Selector là gì? Cách khai báo và sử dụng CSS Selector

CSS selector là gì?

CSS selector là phần đầu tiên trong cú pháp khai báo luật CSS, sử dụng để chọn ra danh sách một hoặc nhiều phần tử muốn áp dụng luật CSS.

Xem thêm phần cách khai báo luật CSS tại đây

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

  • Simple selectors: chọn phần tử dựa trên tên thẻ, id, class

  • Combinator selectors: chọn phần tử dựa vào mối quan hệ giữa các phần tử với nhau

  • Pseudo-class selectors: chọn phần tử dựa trên trạng thái

  • Pseudo-elements selectors: chọn và style các phần tử giả của phần tử gốc

  • Attribute selectors: chọn phần tử dựa trên thuộc tính HTML

Cách khai báo selector

https://flukeout.github.io/

CSS dinner game

  • .class1 : chọn tất cả phần tử chứa class1

  • .class1.class2 : chọn tất cả phần tử chứa cả class1 và class2

  • .class1 .class2 : chọn tất cả phần tử chứa class2 và phần tử đó nằm trong phần tử chứa class1

  • #id1 : chọn phần tử đầu tiên chứa id1

  • * : chọn tất cả phần tử

  • p: chọn tất cả phần tử thẻ p

  • .class1,.class2 : chọn tất cả phần tử chứa class1 và tất cả phần tử chứa class2

  • .class1 > .class2 : chọn phần tử chứa class2 đầu tiên và phần tử đó nằm trong class1

  • .class1:hover : css xảy ra khi phần tử chứa class1 được rê chuột vào

  • img[alt] : chọn tất cả các thẻ img chứa thuộc tính alt

Xem thêm: https://www.w3schools.com/cssref/css_selectors.asp

Thứ tự ưu tiên của selector

Trong trường hợp 1 phần tử HTML bị ảnh hưởng bởi nhiều khai báo CSS thì khai báo CSS nào khai báo rõ ràng hơn sẽ được áp dụng

Ví dụ:

Thẻ <h2> sẽ có màu blue vì khai báo rõ ràng hơn

PreviousGiới thiệu CSSNextThêm CSS vào trang

Last updated