Cách sử dụng các bộ chọn trong CSS3

Trong 1 file mã html của chúng ta có vô số thẻ, thẻ này lồng thẻ kia và các thẻ đều này có mối liên quan với nhau theo kiểu cha con, ông bà.. Việc chọn được 1 phần tử để chúng ta style thường khá gây lúng túng cho anh em mới bắt đầu. Trong bài này mình sẽ cùng các bạn đi tìm hiểu các cách để chọn được 1 phần tử để áp dụng css vào nó nhé.

Phân loại bộ chọn : Có 5 loại

1 . * Bộ chọn đơn giản

Bộ chọn đơn giản nhưng đầy sức mạnh và là bộ chọn được sử dụng nhiều nhất, đây là cách chọn theo tên của thẻ nhưng không nên dùng các bạn nhé, chúng ta nên dùng id và class,vì nó là cách chọn đơn giản nên mình giới thiệu cùng các bạn.

p {
color : red;
}

Nếu chúng ta chọn theo cách này thì tất cả chữ trong các thẻ p trong tài liệu của chúng ta sẽ biến thành màu đỏ hết nên cách chọn này rất ít được dùng , và thực tế mình làm thì cũng không dùng cách này. Chúng ta cùng nhớ lại là trong mỗi thẻ của tài liệu html chúng ta có thể đặt các thuộc tính cho mỗi thẻ, và thuộc tính ( attribute ) thì chúng ta đặt bao nhiêu cũng được dựa theo tính chất này chúng ta thêm cho mỗi thẻ html các thuộc tính idclass dựa theo 2 thuộc tính này chúng ta sẽ chọn được đúng thẻ mà chúng ta mong muốn.

id là thuộc tính mang ý nghĩa định danh duy nhất cho thẻ đó nó như căn cước hay chứng minh thư của chúng ta vậy, mỗi thẻ thì chúng ta đặt id cho thẻ đó và trong toàn bộ tài liệu html thì id đó là duy nhất. Còn với class thì linh hoạt hơn với cùng 1 class thì chúng ta có thể đặt cho nhiều thẻ.

Dưới đây là ví dụ về code của trang chủ xyzabc.xyz khi mở bằng devtolls.

bộ chọn

Như trên chúng ta thấy các thẻ lồng vào nhau theo khá là nhiều lớp, nhưng mỗi thẻ mình đều đặt cho mỗi class riêng. Và trong mỗi thẻ section thì cấu trúc nó cũng y như vậy, nhưng chỉ có class là giống nhau còn id thì chỉ 1 thẻ duy nhất, việc class trùng nhau như thế này giúp mình tiết kiệm thời gian và không bị trùng lặp code. Ngoài classid ra trong thẻ của mình còn có nhiều thuộc tính khác, thì đó là những thuộc tính phục vụ cho việc SEO website về vấn đề này mình sẽ chia sẻ cùng các bạn trong các bài viết tiếp theo.

Lưu ý : trong 1 phần tử html hay 1 thẻ chúng ta hoàn toàn có thể có cả 2 thuộc tính id và class cũng như có số lượng bao nhiêu cũng được việc này giúp chúng ta linh hoạt trong việc chọn và style thẻ đó. Với id là duy nhất nên chúng ta nên tránh việc hiểu lẫn với class. Ví dụ chúng ta có thẻ h2 có id = "number" thì trong tất cả thẻ còn lại chúng ta cũng không nên dùng id = "number" này cho bất kỳ thẻ nào nữa . Ngược lại với id chúng ta có thẻ h2 có class = "two" class này có thể được dùng lại ở bất kỳ thẻ nào chúng ta muốn.

2 . * Bộ chọn dựa trên mối quan hệ giữa các thẻ

Trong bộ chọn này chúng ta lại có 4 loại con khác mỗi loại đi theo 4 ký tự đó là ký tự khoảng trắng (phím cách trên bàn phím), dấu > dấu + , dấu ~ . Trong chính blog này mình cũng dùng bộ chọn này nhưng rất ít nên mình chỉ giới thiệu thôi nhé, các bạn hãy code và thử 1 vài lần để hiểu cách thức các bộ chọn này hoạt động nhé.

bộ chọn

Trong ví dụ trên chúng ta chú ý bộ chọn dùng dấu cách trên bàn phím ( space ) với cách chọn này thì tất cả thẻ p bên trong thẻ div có class = "space" thì đều chịu style hết, dù thẻ p đó có là con hay là cháu của thẻ div.

bộ chọn

Trong ví dụ này với bộ chọn sử dụng dấu > thì chỉ những thẻ p là con của thẻ div có class = "space" mới chịu style còn thẻ p cháu hoặc chắt nếu có sẽ không chịu style.

bộ chọn

Trong bộ chọn sử dụng dấu + thì có nghĩa là chúng ta sẽ chỉ chọn 1 thẻ p bên ngoài và ở phía dưới div có class = "space" lưu ý với bộ chọn này là chúng ta chỉ chọn 1 thẻ ngay sau thẻ div có class = "space".

bộ chọn

Trong bộ chọn dấu ~ chúng ta sẽ chọn tất cả các thẻ p sau thẻ div có class = "space". Bộ chọn này chỉ có như này khá đơn giản.

Vẫn còn 3 bộ chọn nữa bài hôm nay khá dài rồi mình sẽ viết vào bài sau nhé. Chúc bạn có 1 ngày tốt lành.

Tag: CSS