CSS Attribute Selectors: Các bộ chọn thuộc tính CSS

Bạn đã biết gì về CSS Attribute Selectors? Có tất cả bao nhiêu loại? Có gì mới trong các bộ chọn thuộc tính CSS3? Sử dụng chúng như thế nào? Chúng ta sẽ cùng tham khảo bài viết dưới dây để có các câu trả lời cho những vấn đề nêu trên.

HTML Attributes – Thuộc tính HTML

Trước khi bắt dầu tìm hiểu về khái niệm CSS Attribute Selector, chúng ta nên nhớ lại xem HTML attribute là gì. Rất tốt, nêu bạn đã quen với các thể loại này trước đây như class, id, style và href …. Còn rất nhiều thứ tương tự, bạn có thể tìm hiểu thêm ở trang W3.org để có danh sách đầy đủ.

CSS tạo định dạng cho các thẻ khá dễ dàng, nếu bạn muốn định dạng một id hay class, chúng ta sẽ viết như sau

#someid {color: black}
. someclass { màu sắc : đen }

Viết như trên xem như tạm ổn, nhưng nếu chúng ta muốn định dạng một vài thuộc tính khác hơn thì phải làm thế nào? Đây là các attribute selector mà chúng ta sẽ tìm hiểu trong bài này.

Attributes Selector – Bộ chọn thuộc tính

Như chúng dã biết, attribute selectors (Các bộ chọn thuộc tính) có giải nghĩa đúng như những gì chúng được đặt tên, đó là cách để chọn và nhắm đến các thuộc tính xác định trong CSS. Điều này thật ra cũng dễ thôi, nó liên quan đến mọi thứ nằm trong hai dấu <> của thẻ mở HTML mà bạn sử dụng. Nào chúng ta cùng xem xét vài trường hợp code HTML cơ bản.

 <li> <a href="http://thietke.website/"> Tự học trang web thiết kế </a> </ li>
 <li> <a href="http://www.vnexpress.net/"> Báo cáo tức thời VNExpress </a> </ li>
 <li> <a href = "http :// hocthietke. org /"> Thiết kế web trang </a> </ li>  

Ví dụ, chúng ta chỉ muốn chọn liên kết “Tự học thiết kế website”. Bạn có thể dùng pseudo selectors, ví dụ: a:first-child, Tuy nhiên, đôi khi chúng ta không thể chọn theo cách này thì còn có 1 cách khác, như là cách dùng attribute selector để nhắm đến href xác định. Trong trường hợp này, bạn chỉ muốn liên kết “Tự học thiết kế website” có màu xanh. Chúng ta sẽ viết đoạn CSS như sau:

 a [href = 'http: //thietke.website/'] {color: blue;}

Kết quả trên trình duyệt:

Repeating Attributes – Thuộc tính có tính chất lập lại

Một ví dụ khác chúng ta có một danh sách liên lạc, và muốn vài mục trong danh sách có định dạng khác biệt so với những mục còn lại . Sử dụng attribute, chúng ta có thể tạo ra sự khác biệt bởi hai mục “friend” và “contact” bên dưới:

<ul>
    <li> <a href = "#" rel = "friend"> Larry </a> </ li>   
    <li> <a href = "#" rel = "contact"> Quăn </a> </ li>   
    <li> <a href = "#" rel = "contact"> Moe </a> </ li>   
    <li> <a href = "#" rel = "contact"> Quăn Joe </a> </ li>   
    <li> <a href = "#" rel = "friend"> Shemp </a> </ li>   
</ ul>

Lần này chúng ta sẽ dựa vào thuộc tính rel để tạo định dạng cho hai mục tiêu lựa chọn. Cách thức cũng giống như ở ví dụ 1, nhưng chúng ta có thể cùng lúc chọn được cùng lúc nhiều mục khác nhau.

li a [rel = 'friend'] {font-weight: bold;}
li a [ rel = 'contact' ] { font - trọng lượng : 200 ;}   

Sử dụng code như ở trên chúng ta sẽ có kết quả như bên dưới, còn một cách khác có thể đạt kết quả như trên như là :nth-child , bộ chọn theo thứ tự . Tuy nhiên :nth-child đôi lúc sẽ cho kết quả sai nếu bạn viết không đúng cách khi danh sách này được thêm hoặc bớt đi. Điều tuyệt vời hơn nữa, là cách viết Repeating Attributes như trên ví dụ được cả các trình duyệt cũ hỗ trợ như IE version 7,8.

Multiples Values – Thuộc tính có nhiều giá trị

Đôi khi, không phải lúc nào mọi chuyện cũng thuận lợi như hai trường hợp trên. Bạn sẽ gặp rắc rối nếu muốn chọn một thuộc tính có nhiều giá trị cùng lúc. Ví dụ:

<ul>
    <li> <a href = "#" rel = "friend nofollow"> Larry </a> </ li>  
    <li> <a href = "#" rel = "contact"> Quăn </a> </ li>  
    <li> <a href = "#" rel = "contact"> Moe </a> </ li>  
</ ul>

Bạn sẽ nghĩ rằng muốn chọn mục đầu tiên “Larry”, chúng ta sẽ tiến hành như cách thức đã biết ở trên, tuy nhiên không phải như vậy. Nếu chỉ đơn giản sử dụng a[rel='friend'], thì bạn sẽ không thực hiện được điều đó. Tuy nhiên, chúng ta sẽ tiến hành như sau, theo cách xem như “friend” chỉ là một trong nhiều giá trị của thuộc tính đó.

li a [rel ~ = 'friend'] {font-weight: bold;}
[ rel ~ = 'bạn' ] { font - weight : bold ;} 

Kết quả, từ “Larry” sẽ dược in đậm mà trước đó cách dùng a[rel='friend'] không thể thực hiện được.

CSS3 Attribute Selectors – Bộ chọn thuộc tính CSS3

CSS3 cung cấp cho chúng ta nhiều chức năng và công cụ mới tuyệt vời. Chẵng có gì ngạc nhiên khi một số Attribute Selector mới được thêm vào CSS3 để giúp chúng ta thêm nhiều cách xác định mục tiêu chọn lựa. Hãy cũng chúng tôi khám phá một vài món thú vị của CSS3 mà bạn sẽ thích thú.

Similarly Named Attributes – Bộ chọn thuộc tính có tên gần giống nhau

Đây là thứ tốt nhất mà CSS3 mang lại. Hãy hình dung, bạn có đoạn code HTML bên dưới và chỉ muốn nhắm đến các id có tên “upperSection” và “lowerSection”, bạn sẽ làm điều đó như thể nào?

<div id = "upperSection"> id = "upperSection" >
    <P> cà rốt lorem ipsum ... </ p>
</ div>
 
<div id = "somethingElse" > 
    <P> cà rốt lorem ipsum ... </ p>
</ div>
 
<div id = "lowerSection" > 
    <P> cà rốt lorem ipsum ... </ p>
</ div>
 
<div id = "footer" > 
    <P> cà rốt lorem ipsum ... </ p>
</ div>

Câu trả lời là bộ chọn mới “Arbitrary Substring Attribute Value Selector” hay còn gọi là bộ chọn sử dụng ký tự * để đại diện cho những cụm chữ giống nhau. Như ví dụ, chúng ta thấy hai id mà bạn muốn chọn có tên là “upperSection” và “lowerSection” có cùng một cụm chữ giống nhau đó là “Section”. Dựa vào điều này ta có thể chọn ra hai mục mong muốn trong danh sách bằng cách viết như sau:

div [id * = 'Mục'] {color: red;}
[ id * = 'Mục' ] { color : red ;} 

Thật tuyệt vời phải không các bạn, bằng cách này bạn có thể gán định dạng cho nhiều ID bằng cách đặt cho chúng một cái tên có một cụm từ nào đó giống nhau. Điều này cũng mở ra nhiều khả năng tạo các bộ chọn phức tạp chỉ với ít dòng code dễ dàng hơn.

Beginning and Ending – Bộ chọn Bắt đầu và Kết thúc

Nếu bộ chọn Arbitrary Substring Attribute Value Selector chỉ nhắm đến các giá trị giống nhau ở một cụm chữ và nằm bất kỳ vị trí nào, thì bộ chọn Bắt đầu và Kết thúc sẽ được áp dụng trong các trường hợp khó hơn là chỉ nhắm đến những từ đứng trước tiên hoặc sau cùng trong chuỗi giá trị thuộc tính. Ví dụ:

<ul>
    <li> <a href = "#" title = "stooge one"> Larry </a> </ li>  
    <li> <a href = "#" title = "the stooge" thứ hai> Quăn </a> </ li>  
    <li> <a href = "#" title = "stooge three"> Moe </a> </ li>  
    <li> <a href = "#" title = "impostor"> Quăn-Joe </a> </ li>  
</ ul>

Hãy hình dung, bạn muốn chọn các mục có giá trị “stooge”, nhưng hai mục “Larry” và “Moe” có màu đỏ và mục “Curly” có màu vàng. Để làm điều này bạn phải dùng cách viết [title^=’stooge’] để nhắm đến các mục có chứa giá trị “stooge” là từ ở vị trí đầu tiên và [title$=’stooge’] để xác định các mục có chứa giá trị “stooge”, là từ ở vị trí cuối cùng trong chuỗi giá trị.

li a[title^='stooge'] {color: red} /*Beginning - Chọn các liên kết có giá trị từ bắt đầu = stooge*/
li a[title$='stooge'] {color: yellow} /*Ending - - Chọn các liên kết có giá trị từ cuối cùng = stooge*/

Chaining Attribute Selectors – Bộ chọn theo chuỗi

Nào bây giờ chúng ta sẽ đặt ra mục tiêu phức tạp hơn. Ví dụ như là một loạt các thuộc tính có chuỗi giá trị như đoạn code HTML dưới đây:

<ul>
    <li> <a href = "#" title = "stooge one"> Larry </a> </ li>  
    <li> <a href = "#" title = "the stooge" thứ hai> Quăn </a> </ li>  
    <li> <a href = "#" title = "stooge three"> Moe </a> </ li>  
    <li> <a href = "#" title = "the impostor"> Quăn-Joe </a> </ li>  
</ ul>

Mục tiêu đặt ra là chọn tất cả các mục liên kết có giá trị title chứa từ “stooge”, nhưng chỉ với những thuộc tính có giá trị chứa từ “the” ở vị trí đầu tiên. Có lẽ bạn dang nghĩ đến cách làm này a[title^='the'], tuy nhiên đừng quên ở mục cuối cùng, liên kết đó cũng có giá trị chứa từ “the” ở vị trí đầu tiên nhưng không chứa từ “stooge”! Do đó, cách viết bộ chọn thuộc tính đúng như sau:

li a [title * = 'stooge'] [title ^ = 'the'] {color: red;}
[ title * = 'stooge' ] [ title ^ = 'the' ] { color : red ;} 

Đơn giản không các bạn? Tất cả những gì chúng ta cần là đặt hai bộ chọn có điều kiện khác nhau trên cùng 1 dòng. Điều quan trọng bạn cần chú ý là sự kết hợp này không phải là điều kiện EITHER/OR (chỉ cần đáp ứng 1 trong 2 điều kiện) mà là BOTH/AND (buộc đáp ứng đủ cả hai điều kiện). Nếu mục nào đáp ứng cả hai điều kiện trên đều là mục tiêu của được lựa chọn.

Tìm hiểu thêm

Nếu bắt đầu thích thú với những thủ thuật CSS, chúng tôi sẽ viết thêm những bài có chủ đề tương tự trong tương lai. Còn nhiều điều thú vị sẽ khiến bạn ngạc nhiên. Ví dụ như bộ chọn Adjacent Sibling Combinators, nhắm vào các đối tượng có quan hệ anh/em liền kề trong cây phân nhánh DOM và General Sibling Combinators , nhắm vào các đối tượng có quan hệ anh/em ở vị trí bất kỳ. Chúng ta thử lướt qua trường hợp sau đây:

<div id = "bộ tổ hợp"> id = "bộ tổ hợp" >
    <p> Không phải cái này. </ p>    
    <h1> ám ảnh </ h1>
    <p> Chọn tôi! </ p>
    <P> cà rốt lorem ipsum ... </ p>
    <P> cà rốt lorem ipsum ... </ p>
    <P> cà rốt lorem ipsum ... </ p>
</ div>

Giả sử chúng ta chỉ muốn chọn đoạn văn bản “Pick me!” , bộ chọn Adjacent Sibling Combinators sẽ giúp ta làm điều đó. Nó sẽ chọn bất kỳ đoạn văn bản p nào trên trang mà có thẻ h1 đứng liền kề trên nó, có nghĩa là đoạn văn bản p đầu tiên ngay sau tiêu đề h1.

h1 + p (màu sắc: cam;}
+ p ( màu sắc : cam ;}

Tương tự, General Sibling Combinator giúp chúng ta nhắm đến tất cả các thẻ p đứng sau tiêu đề h1, do vậy đoạn văn bản đầu tiên trên tiêu đề sẽ không được chọn còn lại tất cả đều được áp dụng.

h1 ~ p (màu cam;
~ p { màu sắc : cam ;

Đây chỉ là vài món khai vị hấp dẫn của CSS3, chúng ta sẽ còn tìm hiểu thêm về chúng đầy đủ hơn ở một bài viết khác.