Khái niệm vùng chọn trong CSS WDI Blog

Khái niệm và cách sử dụng vùng chọn trong CSS10 phút đọc

Trong bài viết trước mình đã giải thích khái niệm CSS là gì, cách viết CSS và cả cách nhúng CSS vào HTML.Còn trong bài viết lần này mình sẽ tiếp tục giới thiệu đến các bạn một kiến thức căn bản nhưng vô cùng quan trọng trong CSS đó là vùng chọn trong CSS.

Khái niệm vùng chọn trong CSS

Để áp dụng một thuộc tính CSS cho một yếu tố HTML nào đó bạn cần chọn yếu tố HTML đó bằng cách gọi nó thông qua khai báo tên thẻ HTML, Class, ID.

Trên thực tế một tài liệu HTML sẽ có rất nhiều yếu tố HTML giống nhau và không phải lúc nào chúng ta cũng thêm class hay ID để gọi nó ra được.Do đó vùng chọn trong CSS ra đời giúp chúng ta có nhiều cách gọi đến yếu tố HTML hơn mà không cần khai báo thêm Class hay ID.

Bạn đã hiểu khái niệm và vai trò của vùng chọn trong CSS rồi phải không nào ? Giờ thì chúng mình cùng tiếp tục tìm hiểu cách sử dụng vùng chọn trong CSS nhé.

Chọn theo tên thẻ

Chọn theo tên thẻ là kĩ thuật chọn phổ biến nhất và áp dụng dễ dàng nhất.Cách chọn theo tên thẻ sẽ gọi trực tiếp tên thẻ HTML ra để áp dụng thuộc tính CSS cho nó.

Ví dụ

Như ở ví dụ trên đây mình gọi luôn thẻ div ra và áp dụng hai thuộc tính CSS cho nó.

Chọn theo tên Class

Đây là kĩ thuật chọn được áp dụng rất nhiều trong thực tế vì tính linh hoạt của nó.Cách này thường được áp dụng khi gọi một số yếu tố HTML và áp dụng cùng một thuộc tính CSS giống nhau cho chúng.

Như bạn đã biết class dịch ra có nghĩa là lớp.Và trong một tài liệu HTML có thể có rất nhiều tên class giống nhau, những yếu tố trong cùng một lớp thường có chung một thuộc tính CSS nào đó.

HTML

Bạn có thể thấy qua ví dụ HTML trên đây tất cả các thẻ <li> đều có chung một class đó là item, chúng ta có thể chỉ định CSS chung cho toàn bộ thẻ <li> thông qua class item này.

Ngoài ra mỗi thẻ <li> đều có những class riêng như item1, item2 hay item3.Chúng ta có thể thêm CSS riêng biệt cho từng thẻ <li> thông qua những class này.

CSS

Trên đây là đoạn CSS ví dụ trong trường hợp này.Để gọi class của yếu tố HTML trong CSS bạn phải bắt đầu bằng dấu chấm và phía sau là tên class muốn sử dụng.

Chọn theo ID

Khác với class thì trên mỗi tài liệu HTML chỉ tồn tại duy nhất một ID mà thôi.Dó đó cách chọn yếu tố HTML theo ID chỉ được dùng trong một số trường hợp nhất định.

HTML

Trong ví dụ HTML trên đây mình có khai báo ID là box cho thẻ <div>.Giờ mình chỉ việc gọi ID này ra và thêm thuộc tính CSS cho nó là thẻ <div> này sẽ được áp dụng những thuộc tính CSS đó.

CSS

Để gọi ID của yếu tố HTML trong CSS bạn cần bắt đầu bằng dấu # và sau đó là tên ID mà bạn muốn áp dụng thuộc tính CSS cho nó.

Chọn theo kiểu tổ hợp thừa hưởng (Descendant Selector)

Kĩ thuật chọn theo kiểu tổ hợp thừa hưởng là kĩ thuật chọn kết hợp nhiều selector lại và kiểu chọn này chỉ có tác dụng khi toàn bộ selector bạn khai báo phải chính xác tên cũng như thứ tự.

Bạn có thể hiểu kiểu chọn này như kiểu khai báo đường dẫn đến một trang web nào đó.Thứ tự khai báo sẽ từ thư mục lớn đến thư mục nhỏ hơn rồi cuối cùng mới tới file cần sử dụng.

Bạn hãy xem qua ví dụ dưới đây để hiểu rõ hơn nhé.

HTML

Mình muốn chỉ định CSS cho thẻ h1 nằm bên trong thẻ div có class là box thì mình không thể gọi nó ra bằng cách gọi theo tên thẻ được vì lúc này sẽ đụng với thẻ h1 nằm ở phía trên.

Dó đó mình sẽ gọi đến thẻ <h1> này bằng cách dùng kiểu tổ hợp thừa hưởng như dưới đây.

CSS

Phân tích kĩ thì bạn sẽ thấy thẻ <h1> nằm trong thẻ divclassbox và thẻ div này lại được bao bọc bởi một thẻ div khác có idmain.Do đó khi khai báo các yếu tố HTML từ ngoài vào trong sẽ có kết quả như đoạn CSS trên đây.

Ngăn cách giữa các selector là khoảng trắng.Và các bạn lưu ý là phải viết đúng thứ tự các selector từ ngoài vào trong thì thuộc tính CSS mới có tác dụng nhé.

Chọn theo kiểu tổ hợp con (Child Selector)

Kĩ thuật chọn theo kiểu tổ hợp con ít gặp trong thực tế và phạm vi chọn của nó cũng không rộng.Kĩ thuật tổ hợp con là một bộ chọn phối hợp giữa hai selector, trong đó selector thứ hai được chọn khi nó là con trực tiếp của selector thứ nhất. Hai bộ chọn ngăn cách nhau bằng ký tự >.

HTML

Ví dụ mình muốn chọn thẻ <p> đầu tiên ở ví dụ trên và áp dụng thuộc tính CSS cho nó.Nếu sử dụng cách chọn theo kiểu tổ hợp thừa hưởng như trên thì cả thẻ <p> nằm bên trong thẻ <fieldset> cũng sẽ bị áp dụng thuộc tính CSS này.

Cách tối ưu nhất trong trường hợp này là dùng tới kiểu chọn tổ hợp con.

CSS

Trên đây là code CSS sau khi áp dụng kĩ thuật chọn theo kiểu tổ hợp con.

Kết quả

Khái niệm vùng chọn trong CSS 01

Vùng chọn trong CSS (Child Selector)

Chọn theo kiểu anh chị em liền kề (Adjacent Sibling Selector)

Kĩ thuật chọn theo kiểu anh chị em liền kề chỉ có tác dụng với những yếu tố HTML cùng cấp hay nói cách khác là các yếu tố HTML ngay sát nhau.Đây cũng là một kĩ thuật chọn ít gặp trong thực tế và hơi khó hiểu.

Bạn hãy theo dõi ví dụ dưới đây để hiểu rõ hơn.

HTML

Trong ví dụ trên đây, thẻ <div> và hai thẻ <p> ở dưới với nội dung Paragraph 3Paragraph 4 là các thẻ cùng cấp với nhau.

Mình muốn chọn thẻ <p> ngay sau thẻ <div> để áp dụng thuộc tính CSS cho nó.Bình thường bạn có thể gắn class hay ID cho nó để gọi trực tiếp nó ra sử dụng nhưng làm vậy không phải tối ưu.

Cách tốt nhất trong trường hợp này là dùng kĩ thuật chọn theo kiểu anh chị em liền kề.

CSS

Trên đây là code CSS áp dụng kĩ thuật chọn theo kiểu anh chị em liền kề.Thẻ <p> với nội dung Paragraph 3 nằm ngay sau thẻ <div> sẽ có nền màu vàng.

Kết quả

Khái niệm vùng chọn trong CSS 02

Vùng chọn trong CSS (Adjacent Sibling Selector)

Chọn theo kiểu anh chị em ruột (General Sibling Selector)

Kĩ thuật chọn theo kiểu anh chị em ruột là kĩ thuật giúp bạn chọn một lúc nhiều yếu tố HTML là anh chị em ruột của yếu tố đã được chỉ định.Như hai kĩ thuật chọn ngay bên trên thì đây cũng là kĩ thuật chọn không mấy phổ biến và cách sử dụng khá phức tạp.

HTML

Ví dụ ở đây mình chỉ muốn chọn đến thẻ <p> có nội dung Paragraph 3Paragraph 4 để áp dụng thuộc tính CSS cho chúng.Cách hay nhất trong trường hợp này đó là sử dụng kĩ thuật chọn theo kiểu anh chị em ruột.

Bạn cần chọn thẻ <div> nằm ngay bên trên hai thẻ <p> muốn chọn làm mốc và cùng cấp với hai thẻ <p> này.Sau đó áp dụng cách khai báo của kĩ thuật chọn theo kiểu anh chị em ruột là xong.

CSS

Hai Selector khai báo theo kĩ thuật này ngăn cách nhau bởi dấu ngã ~

Kết quả

Khái niệm vùng chọn trong CSS 03

Vùng chọn trong CSS (General Sibling Selector)

Bài viết bạn phải đọc ngay sau bài viết này đó là bài viết “Giải thích chi tiết dễ hiểu về độ ưu tiên trong CSS” trên blog của mình vì hai bài viết này đều đề cập đến những kiến thức vô cùng quan trọng và liên quan mật thiết đến nhau.Mình có để link ngay dưới đây để bạn tiện tham khảo khi cần nhé.

Kết luận

Trong bài viết này mình đã giới thiệu đến các bạn tất cả 7 cách chọn yếu tố HTML để áp dụng thuộc tính CSS cho chúng.Tuy nhiên bạn không cần phải nhớ và thành thạo hết tất cả những cách đó ngay bây giờ.

TÍnh từ trên xuống chỉ có 4 cách đầu là thường xuyên được sử dụng nên bạn cần hiểu và nhớ cách sử dụng của chúng.3 cách còn lại thì bạn cũng nên biết biết đâu sau có cơ hội phải dùng đến nó.

Kĩ thuật vùng chọn trong CSS còn khá nhiều kiến thức nữa và mình sẽ giới thiệu tiếp đến các bạn trong các bài viết sắp tới.Hãy luôn ủng hộ và theo dõi blog để cập nhật những kiến thức bổ ích hơn nữa nhé.

Bài viết trước

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x