[CSS] Bài 4.2 : CSS Selector

8.Attribute selectors:

Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.

Ví dụ sau sẽ quy định tất cả các thành phần có thuộc tính title được tô màu đỏ
Ví dụ sau sẽ quy định tất cả các thành phần có thuộc tính title được tô màu đỏ

1	[title]{color: red}

Chúng ta có thể chỉ định chính xác một thành phần nào đó với Attribute selectors dựa vào giá trị của thuộc tính tính đó.
Ví dụ sau quy định tất cả các thành phần form có thuộc tính type=”text” được hiển thị với đường viền màu đỏ. Còn các thành phần type=”submit” không bị ảnh hưởng.
Mã HTML

1	<p>Email: <input type="text" name="email" /></p>

2	<p>Address <input type="text" name="address" /></p>

3	<p>Address <input type="submit" name="submit" /></p>

Mã CSS

1	input[type="text"]{border: 1px solid red}

Chúng ta có thể chọn nhiều thành phần dựa vào giá trị chung của một thuộc tính (Coi mỗi giá trị ngăn cách nhau bởi khoảng trắng), chúng ta cùng xem ví dụ sau:
Mã HTML:

1	<p title="irst paragraph">Đoạn văn thứ nhất</p>

2	<p title="second paragraph">Đoạn văn thứ hai</p>

3	<p title="other">Đoạn văn không bị ảnh hưởng</p>

Ta thấy 2 thành phần p thứ nhất và 2 với thuộc tính title có chung một giá trị là: paragraph, do đó ta có thể chọn được 2 thành phần p 1 và 2 dựa vào giá trị chung này và cho hiển thị với màu đỏ, ta viết CSS như sau:

1	p[title~=paragraph]{color: red}

Ví dụ sau sẽ chọn tất cả các thành phần p có thuộc tính title với giá trị chỉ định là pg, hoặc có giá trị dạng pg-giá trị khác (ngăn cách bởi dấu – )

1	<p title="pg">First</p>

2	<p title ="pg-second">Second</p>

3	<p title ="pg-three">Three</p>

4	<p title ="other">Other</p>

Mã CSS

1	p[title|=pg]{color: blue}

Kết quả là 3 đoạn văn bản đầu tiên được hiển thị với màu xanh.

Phần này chỉ đọc thôi thì rất khó hiểu, các bạn cứ làm nhiều rồi sẽ quen. Không phải lúc nào chúng ta cũng sử dụng hết những quy tắc ở đây, nhưng biết được những quy tắc này, bạn có thể viết CSS cho các thành phần mà không cần phải thêm Class hay ID vào trong các thẻ HTML, giúp code HTML gọn gàng hơn và mạch lạc hơn (Clean HTML).

9. Pseudo classes & Pseudo elements

Pseudo elements & Pseudo classes là gì?

- Nếu như các selectors khác xác định 1 thành phần dựa vào vị trí của thành phần trên document tree thì với pseudo elements và pseudo classes, CSS cho phép xác định 1 thành phần dựa trên thông tin nằm ngoài document tree.

- Pseudo elements tạo ra các khái niệm trừu tượng về document tree ngoài các quy định của HTML và XHTML. Ví dụ, HTML và XHTML không có cơ chế cho phép truy cập đến ký tự đầu tiên hay dòng đầu tiên của một thành phần nào đó. Tuy nhiên với pseudo elements, ta có thể hướng đến các thành phần này.

- Pseudo classes phân loại các thành phần dựa vào các yếu tố khác thay vì dựa vào tên, thuộc tính hay nội dung như các selectors khác. Pseudo classes có tính động, có nghĩa là 1 thành phần có thể có được hoặc mất đi 1 pseudo class khi người dùng tương tác với thành phần đó (trừ :first-child và :last-child có thể rút trích ra từ document tree).

Một số Pseudo elements thường dùng

- :first-line & :first-letter : lựa chọn dòng đầu tiên và ký tự đầu tiên của 1 thành phần nào đó

p:first-line {color: red}
p:first-letter {color:yellow; font-size: 20px}

- before & after: có thể được dùng để tạo ra nội dung trước và sau nội dung của 1 thành phần nào đó

blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}

Một số Pseudo classes thường dùng

- :first-child, :last-child
Ví dụ đoạn CSS sẽ thiết lập thuộc tính border màu đỏ cho thẻ li là con đầu tiên của thẻ ul, thuộc tính border màu xanh cho thẻ li là con cuối cùng của thẻ ul

ul li:first-child {border: 1px solid red;}
ul li:last-child {border: 1px solid blue;}

- :link, :visited: thường được dùng với thẻ anchor (thẻ a), với a:link xác định các thẻ a đã thiết lập thuộc tính href và a:visited xác định các thẻ liên kết đã được thăm qua

a.link {color: red;}
a.visited {color: #cecece;}

- :hover, :focus, :active: trong đó :hover là pseudo class có được khi người dùng di chuột qua 1 thành phần nào đó, :focus có được khi 1 thành phần nhận được con trỏ văn bản, :active là khi thành phần đó đang được click chuột

a:hover{ color: yellow;}
a:active {font-size: 2em;}
textarea:focus {border: 1px solid red;}

10. Độ ưu tiên của selecter: 

Trong CSS thì selector nào mô tả chi tiết hơn sẽ có mức độ ưu tiên cao hơn (có thể hiểu nôm na là selector nào dài hơn sẽ được ưu tiên hơn)
Ví dụ

strong { color: red }
p strong { color: blue }

Đoạn CSS sẽ thiết định tất cả các thẻ strong nằm trong 1 thẻ p nào đó sẽ có màu xanh (thay vì màu đỏ) vì dòng CSS thứ 2 mô tả chi tiết hơn nên có mức độ ưu tiên cao hơn.

11. Grouping: 

Khi các thành phần có chung 1 style thì ta có thể nhóm các thành phần đó lại với nhau và chỉ phải khai báo css 1 lần duy nhất cho tất cả các thành phần này. Khi grouping thì mỗi selector được phân cách bởi dấu ','

Ví dụ: 3 dòng CSS sau:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
p { font-family: sans-serif }

có thể được gộp lại thành 1 dòng CSS duy nhất:

h1, h2, p { font-family: sans-serif }