CSS 03 – Các loại Selector trong CSS

0
190

Xin chào các bạn, bài trước chúng ta đã tìm hiểu về cú pháp viết trong CSS, ở đó có 1 khái niệm là Selector. Và bài này chúng ta sẽ đi tìm hiểu kĩ về khái niệm này trong CSS, để các bạn có thể sử dụng đúng cách và hợp lý nhất.

Element Selector trong CSS

Đầu tiên là Element Selector hay gọi là bộ chọn phần tử. Element Selector này sẽ chọn các phần tử dựa trên tên của chúng.

Ví dụ:

Như trong ví dụ trên, chúng ta chọn phần tử p (hay là thẻ p trong HTML, mỗi thẻ là một phần tử) và áp dụng style cho phần tử này.

Có nhiều cách chọn phần tử khác nhau, và tùy theo mục đích thì bạn có thể sử dụng Type Selector, Universal Selector, hoặc Descendant Selector.

Type Selector

Là dạng Selector gọi trực tiếp tên thẻ HTML cần định dạng.

Universal Selector

Nếu bạn muốn áp dụng một style nào đó cho tất cả các thẻ HTML trong tài liệu, bạn có thể sử dụng cú pháp giống như dưới đây.

Dấu “*” đại diện cho toàn bộ các thẻ trong HTML.

Descendant Selector

Giả sử bạn chỉ muốn áp dụng style này cho một phần tử mà là con của phần tử khác (phần tử con là phần tử mà nằm bên trong phần tử khác).

Ví dụ sau sẽ áp dụng style cho phần tử li chỉ khi nào nó nằm bên trong thẻ <ul>:

Class Selector trong CSS

Class là 1 thuộc tính trong HTML để bạn có thể trang trí dựa theo tên class của phần tử đó. Cú pháp như sau:

Để chọn các phần tử với một class cụ thể, bạn viết một dấu chấm (.) ở trước tên class của phần tử đó.

Ví dụ dưới đây sẽ định nghĩa Style Rule cho tất cả phần tử HTML với class= “hello”:

Với trường hợp có nhiều phần tử với cùng một class, nếu bạn chỉ muốn áp dụng style rule cho một phần tử nào đó, bạn viết tên phần tử đó trước cú pháp trên, như sau:

Các phần tử HTML có thể tham chiếu tới nhiều class. Do đó, bạn có thể áp dụng nhiều Style Rule cho một phần tử (chẳng hạn div) với các class = “hello” (như trên) và class = “pink” (để xác định màu hồng chẳng hạn), như sau:

ID Selector trong CSS

ID Selector sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Trong một website, mỗi phần tử nên có một id duy nhất, vì thế ID Selector được sử dụng để lựa chọn một phần tử duy nhất và riêng biệt.

Cú pháp:

Để lựa chọn một phần tử với một id cụ thể, bạn viết một ký tự # (đọc là ký tự hash) ở trước id của phần tử đó. Cách trang trí CSS cho id như sau:

Ví dụ:

Xác định cụ thể hơn như trong ví dụ sau:

Style Rule này sẽ chỉ áp dụng cho các phần tử <p> có id là red.

Ngoài ra, nếu bạn muốn áp dụng style rule cho một phần tử mà là con của (hay nằm trong) phần tử khác, bạn có thể sử dụng:

Style Rule này sẽ áp dụng cho phần tử a là phần tử con của phần tử có id là red.

Phân biệt ID Selector và Class Selector

  • Với ID thì trong mỗi trang web nó là duy nhất nên thông thường chúng ta hay dùng nó ở những vị trí không có tính chất lặp đi lặp lại nhiều lần
  • Với Class thì ta có thể đặt nhiều vị trí, chính vì vậy nếu website bạn có nhiều block giống nhau thì hãy chọn class

Child Selector trong CSS

Phần trên bạn đã tìm hiểu về Descendant Selector. Ngoài ra, còn có một kiểu Selector nữa mà khá giống với kiểu này. Bạn theo dõi ví dụ:

Style Rule này sẽ được áp dụng cho tất cả các phần tử p mà trực tiếp là con của phần tử body. Các phần tử p khác nằm bên trong các phần tử như div hoặc td sẽ không bị tác động.

Attribute Selector trong CSS

Bạn cũng có thể áp dụng style cho các phần tử HTML có các thuộc tính cụ thể nào đó. Ví dụ sau sẽ áp dụng style rule cho tất cả phần tử input nào mà có thuộc tính type= “text”.

Phương thức này đem lại lợi thế: phần tử <input type = “submit” /> sẽ không bị tác động bởi style rule trên, và color sẽ chỉ được áp dụng cho trường text.

Sau đây là ví dụ về một số rule áp dụng cho Attribute Selector:

  • p[lang] : lựa chọn tất cả phần tử p mà có thuộc tính lang.
  • p[lang=”fr”] : lựa chọn tất cả phần tử p mà có thuộc tính lang có giá trị chính xác là fr.
  • p[lang~=”fr”]: lựa chọn tất cả phần tử p mà có thuộc tính lang có giá trị có chứa từ fr.
  • p[lang|=”en”] : lựa chọn tất cả phần tử p mà có thuộc tính lang có giá trị chính xác là en hoặc bắt đầu với en.

Multiple Style Rule trong CSS

Bạn có thể định nghĩa nhiều style rule cho cùng một phần tử. Tuy nhiên, thay vì viết nhiều Style Rule riêng biệt để áp dụng cho chỉ một phần tử, thì bạn có thể viết gộp như sau:

Như trên, tất cả các cặp property và value được phân biệt bởi dấu chấm phảy (;). Tùy theo phong cách của mình, bạn có thể viết chúng trên cùng một dòng hay trên nhiều dòng. Nhưng tốt hơn hết, để cho code của bạn dễ đọc và dễ duy trì, bạn nên viết từng cặp trên từng dòng riêng biệt.

Khi lần đầu tiên nhìn vào ví dụ trên, có thể bạn sẽ không hiểu các property này có tác dụng gì. Hãy bình tĩnh, bởi vì chúng ta mới bắt đầu học mà.

Grouping Selector trong CSS

Có một tình huống xảy ra là giả sử bạn muốn áp dụng cùng một style rule cho nhiều phần tử khác nhau. Nếu theo những gì đã học ở trên, bạn phải viết lần lượt từng style rule này cho từng phần tử. Như vậy cũng được, nhưng hãy tưởng tượng nếu số lượng phần tử là lớn và việc lặp đi lặp lại này có thể sẽ tốn khá nhiều thời gian. Có cách nào tốt hơn không. Có.

Bạn hãy nhóm tất cả các phần tử này lại, và sau đó áp dụng style rule chung mà bạn muốn áp dụng cho chúng. Đó cũng chính là ý nghĩa của Grouping Selector trong CSS. Bạn theo dõi ví dụ sau:

Style rule này sẽ áp dụng cho các phần tử h1, h2, và h3. Bạn cần chú ý là giữa các phần tử này phải có dấu phảy (,) nhé. Đó là cú pháp chung. Sử dụng Grouping Selector sẽ giúp bạn tiết kiệm được thời gian và tối thiểu hóa được lượng code mà bạn cần viết.

Tương tự, nếu bạn muốn áp dụng cho nhiều class, thì bạn có thể sử dụng nhiều Class Selector trong CSS như ví dụ dưới đây:

Kết luận

Bài học hôm nay đã đem tới cho các bạn đầy đủ nhất các kiến thức về Selector, cùng với đó là các cách thức viết CSS ngắn gọn, dễ hiểu, chuẩn code. Hẹn gặp lại các bạn ở bài kế tiếp.

Chúc các bạn học tập tốt!

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây