[CSS] Bài 4.1: CSS Selectors

CSS Selectors là một khái niệm rất quan trọng trong CSS. Những Propety của CSS nếu không biết hay bạn đã quên thì bạn có thể Google ra, nhưng nếu bạn không nắm được CSS Selector thì gióng như bạn đi đường mà không biết đường vậy. Nắm được cách sử dụng Css Selector sẽ là chìa khóa để bạn học Css dể dàng hơn.
Nếu như trong thực tế nếu bạn muốn đến thăm một ai đó thì bạn cần biết được địa chỉ của người bạn muốn thăm nằm ở đâu, thì trong CSS bạn phải nắm vững khái niệm về CSS Selector bạn mới có thể xác định chính xác đối tượng bạn muốn định dạng. Việc không nắm rõ khái niệm CSS Selector có thê dẫn đến việc đi nhằm đường, hướng đến không đúng đối tượng cần định dạng dẫn đến tình trạng định dạng không như ý, lạm dụng ID và Class làm code bạn trở nên rối rắm và khó hiểu...
Trong bài viết này mình sẽ giới thiệu đến các bạn tổng quan về CSS selector và một số CSS Selector quan trọng và thường được sử dụng nhất trong CSS.

1. Khái niệm Quan hệ gia đình trong HTML

Để hiểu rỏ Quan hệ gia đình trong HTML ta xét ví dụ sau:
Code HTML:

<body>
<h1>CSS selector</h1>
<ul id="wrapper">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
</ul>
<p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p><strong>Pellentesque nibh</strong> purus, volutpat faucibus a, dictum in dolor.</p>
<img src="image1.jpg" alt="tree"/>
<img src="image2.jpg" alt="plant"/>
</body>

Nếu xem tài liệu HTML như 1 "cây phả hệ" thì body chính là gốc của "cây phả hệ" đó. Các thẻ h1, ul, 2 thẻ p và 2 thẻ img được bao bởi thẻ body chính là "con" của gốc body. Thẻ ul chứa trong nó 4 thẻ li, các thẻ li này là "con" của thẻ ul và là "cháu" của gốc body trên "cây phả hệ". Cứ tiếp tục như thế, ta sẽ lập được "cây phả hệ" tương ứng với tài liệu HTML đã cho ở trên:

Việc nắm được các thẻ cha con như thế này rất quan trọng sau này khi viết CSS vấn đề này sẽ ảnh hưởng rất nhiều đến CSS.

2.Universal Selector

Khi bạn muốn hướng tới mọi thành phần của HTML thì ta sẽ dùng Universal selector (viết là *). Đây chính là Selector yếu nhất của CSS (có mức độ ưu tiên thấp nhất - mức độ ưu tiên của selector sẽ được trình bày sau) và thường được sử dụng để reset css (mỗi trình duyệt có 1 mặc định riêng về CSS nên nếu bạn muốn trang web của bạn hiển thị gióng nhau ở tất cả các trình duyệt bạn cần reset CSS)

Cú Pháp:

`1`	`* {property` `1:` `value` `1` `;…; property n: value n }`

Ví dụ sau ta sử dụng Universal selector để reset margin và padding của tất cả các thành phần về 0.

`1`	`* {margin:` `0;` `padding:` `0}`

Khi ta khai báo các thuộc tính tương tự lên các thành phần khác thì những gì đã khai báo trong Universal selector sẽ không còn tác dụng.

Bạn cũng có thể sử dụng * cho tất cả thành phần con của 1 thành phần cha nào đó:

Ví Dụ để tạo background là yellow cho tất cả thành phần con của tag div ta viết code như sau

<!DOCTYPE html>
<html>
<head>
<style>
div *{background-color:yellow;}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

Hiển Thị:

<!DOCTYPE html>
<html>
<head>
<style>
div *{background-color:yellow;}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

3. Type selectors

Type selector là các chỉ định tên của các thẻ HTML sẽ bị ảnh hưởng bởi các câu lệnh CSS. Cú pháp Type selectors như sau:

`1`	`tagname {color:` `red}`

Với Tagname: là tên thẻ HTML
Ví dụ sau quy định tất cả các thành phần h2 trong tài liệu HTML được hiển thị với màu đỏ:

`1`	`h2` `{color:` `red}`

4. Class Selectors và ID Selectors

Ở bài trước bạn đã được học về Class và ID nên phần này mình chỉ nói sơ qua về class và id, mỗi thẻ HTML có duy nhất một ID ( Id này là duy nhất trong toàn bộ tài liệu HTML ) và có nhiều thẻ Class, một thẻ Class có thể áp dụng cho nhiều thẻ HTML và 1 thẻ HTML cũng có thể sử dụng nhiều thẻ Class.
Ví Dụ:

1

2

3

#wrapper { margin: 5 auto; }
.box {border: 1px solid red;}
p.item {color: red;}

Đoạn CSS sẽ thiết lập định dạng cho thẻ có id là wrapper, các thẻ các class là box và các thẻ p có class là item (các thẻ khác có class là item cũng không ảnh hưởng). Chú ý là bạn phải ghi liền p và .item (nếu ghi cách ra thì ý nghĩa của selector sẽ khác).

5.Descendant selectors

Khi muốn hướng tới 1 thành phần trong 1 thành phần khác, ta sẽ sử dụng descendant selector, Descendant selectors là cách chọn thành phần B là con hoặc cháu (và các cấp sâu hơn) của thành phần A nào đó.
Cú pháp Descendant selector như sau:

`1`	`A B {property` `1:` `value` `1` `;…; property n: value n }`

A: Là thành phần cha
B: là thành phần con, hoặc cháu,… của A

Chúng ta cùng xem xét ví dụ sau, dưới đây chúng ta có 3 thành phần <em>:

1<p><em>Thành phần em thứ nhất là con của p</em></p>
2<div>
3<ul>
4<li><em>Thành phần em thứ 2 là con của li, là cháu của ul và div</em></li>
5</ul>
6<em>Thành phần em thứ 3 là con của div</em>
7</div>

Giả sử bây giờ ta chỉ muốn thành phần <em> thứ nhất được hiển thị với màu đỏ? thành phần <em> thứ 2 và thứ 3 có màu xanh:

1p em {color: red}
2div em{color: blue}

Chỉ có thành phần <em> thứ nhất thỏa điều kiện là con của <p> lên được hiển thị với màu đỏ.
Thành phần <em> thứ 2 là cháu của <div> và thành phần <em> thứ 3 là con của div lên được hiển thị với màu xanh

6. Child selectors

Selector này sẽ hướng tới 1 thành phần là con của 1 thành phần nào đó trong cây phả hệ đã được trình bày ở trên, Khác với Descendant selectors, Child selector là cách chọn thành phần B là con của thành phần A nào đó, cú pháp Child selector như sau:

`1`	`A > B {property` `1:` `value` `1` `;…; property n: value n }`

A: Là thành phần cha
B: là con của A

Xét lại ví dụ trên, giả sử bây giờ ta chỉ muốn thành phần <em> thứ 3 có màu xanh, còn thành phần thứ 2 thì không bị ảnh hưởng, ta viết CSS như sau:

`1`	`div > em {color:` `blue` `}`

Chỉ có thành phần <em> thứ 3 là con của div nên được hiển thị với màu xanh. Thành phần em thứ 2 không bi ảnh hưởng vì là cháu của <div>

7.Adjacent sibling selectors

Loại selector này có cú pháp là E1 + E2, trong đó E2 là thành phần cần hướng đến và loại selector này chỉ có tác dụng khi E1 và E2 có cùng 1 cha trong cấu trúc cây HTML đồng thời E1 là thành phần nằm liền trước E2.

Chúng ta cùng xem xét ví dụ sau:

1<p>Đoạn văn bản này là thành phần A</em></p>
2<span>Thành phần span này là B</span>
3<div>Thành phần div là C</div>

Câu hỏi đặt ra là có cách nào chọn được C dựa vào A hoặc B không? Câu trả lời là có, trong CSS đó chính là Adjacent sibling selectors (có thể gọi tắt là Sibling selectors) . Nó cho phép chọn một thành phần B ở gần thành phần A nhât trong tài liệu HTML, mà giữa A và B không có một thành phần D nào khác.

`1`	`A + B {property` `1:` `value` `1` `;…; property n: value n }`

Bây giờ chúng ta sẽ chọn thành phần <div> C dựa vào thành phần <span> B và hiển thị với màu đỏ:

`1`	`span + div {property` `color:` `red` `}`

Tương tự ta có thể chọn được B dựa vào A

`1`	`p + span {property` `color:` `red` `}`

Nhưng không thể chọn C dựa vào A bởi vì giữa A và C có thành phần <span> B.
(Tiếp tục ở bài tiếp theo)

abcdasdasd

Thứ Sáu, 30 tháng 8, 2013