Tìm hiểu chi tiết về CSS Selectors

CSS Selectors dùng để chọn phần tử với điều kiện kèm thêm là thuộc tính của phần tử đó. Mục đích là giúp bài điều khiến các thuộc tính của các thẻ HTML giúp cho việc thiết kế web trở nên nhanh chóng và dễ dàng hơn. Bài viết này sẽ giới thiệu cho các bạn các biểu thức chọn theo dạng CSS Selectors.

CSS Seletors
CSS Seletors là gì

Element trong CSS Selectors
Để chọn theo tên thẻ sử dụng cú pháp $(‘tên thẻ’)
ID: #myid trong CSS Selectors
Chọn theo tên id của phần tử sử dụng cú pháp $(‘tên id’)
CSS Selectors  Class: .myclass
Chọn theo tên class của phần tử sử dụng cú pháp $(‘.tên class’). Có một điều nên chú ý rằng trong cấu trúc hồ sơ của bạn thì class thường được dùng cho nhiều phần tử nên kết quả biểu thức chọn này thường trả về một mảng phần tử.
CSS Selectors Descendant: E F
Chọn theo con cháu ví dụ chọn phần tử img là hậu duệ của phần tử a sẽ có cú pháp $(‘a img’)
CSS Selectors  Child: E > F
Chọn theo thẻ con trực tiếp cú pháp $(‘tên thẻ > tên thẻ’). Phương pháp chon theo CSS này được hổ trợ trên hầu hết các trình duyệt hiện đại và không hổ trợ trên trình duyệt IE từ phiên bản 6 về trước

CSS Selectors 2

Adjacent Sibling: E + F trong CSS Selectors
Chọn những thẻ có cùng phần tử cha và nằm kế nhau tức chúng là anh em của nhau, cú pháp $(‘tên thẻ + tên thẻ’)
General Sibling: E ~ F trong CSS Selectors
Chọn những phần tử F cùng cấp với phần tử E, cú pháp $(‘tên thẻ ~ tên thẻ’)
Multiple Elements: E,F,G trong CSS Selectors
Chọn nhiều phần tử cùng lúc, cú pháp $(‘tên thẻ, tên thẻ,…’)
Nth Child (:nth-child(n))
Chọn phần tử con theo thứ tự chỉ mục n, ở đây nth-child(n) sẽ đánh số từ 1 và đánh chỉ mục với tất cả các thẻ con, trong khi đó nth(n) sẽ đánh số từ 0 và chỉ đánh chỉ mục theo phần tử bạn chọn. Ngoài ra bạn có thể thay n bằng từ khóa even để chọn những phần tử con chẵn hoặc odd để chọn những phần tử con lẻ.

CSS Selectors 3
First Child (:first-child) trong CSS Selectors
Chọn phần tử con đầu tiên, cú pháp $(‘tên thẻ:first-child’)
Last Child (:last-child) trong CSS Selectors
Chọn phần tử con cuối cùng, cú pháp $(‘tên thẻ:last-child’)
Only Child :only-child trong CSS Selectors
Chọn tất cả những phần tử chỉ là con, cú pháp $(‘tên thẻ:only-child’)
Not :not(s) trong CSS Selectors
Chọn theo dạng phủ định. Ví dụ
$(‘li:not(.myclass)’) Chọn những phần tử li nào không có class tên myclass
$(‘li:not(:last-child)’) Chọn những phần tử li nào không phải là phần tử con cuối cùng
Empty :empty trong CSS Selectors
Chọn những phần tử nào rỗng tức là nó không có con cháu, cú pháp $(‘phần tử:empty’) hoặc $(‘:empty’)
Universal: * trong CSS Selectors
Dấu * sử dụng trong thẻ chọn đại diện cho tất cả các phần tử

Hy vọng với bài viết về CSS Selector này sẽ giúp bạn thiết kế web chuyên nghiệp một cách nhanh chóng và hiệu quả hơn. Việc tiết kiệm được thời gian trong thiết kế cũng giúp tạo ra các trang web giá rẻ nhằm tạo sự cạnh tranh tốt hơn. CSS Selector thực sự giúp bạn tối ưu thời gian và công sức xậy dựng website

Đọc thêm: Khóa học seo tại Duy Anh Web có ích như thế nào với các website nhé

Trả lời