Bài 03: selector là gì? Tìm hiểu CSS Selector căn bản

CSS Selector đóng vai trò rất quan trọng khi các bạn code layout cho website, tuy nhiên về các loại selector thì hơi nhiều nên trong bài này tôi chỉ trình bày một số selector thông dụng và căn bản nhất để các bạn dễ theo dõi, các vấn đề nâng cao mình sẽ trình bày ở một bài khác.

Trước khi  tìm hiểu khái niệm selector là gì thì mình muốn nhắc lại kiến thức về HTML và CSS một chút xíu. Như bạn biết các thẻ HTML thường sẽ có thẻ mở <tag> và thẻ đóng </tag>  và bên trong thẻ đó có thể có nhiều thẻ khác nữa. Vậy ta sẽ gọi thẻ tag đó là thẻ cha và các thẻ nằm bên trong nó là thẻ con.

Ví dụ:

<div id="parent">
    <div id="children">

    </div>
</div>

Trong ví dụ này thẻ div ngoài cùng có id="parent" là thẻ cha, còn thẻ div có id="children" là thẻ con.

Lưu ý: Trước khi học bài này bạn nên đọc qua bài cách viết CSS đã nhé.

1. Selector là gì?

Selector nếu dịch tiếng anh thì có nghĩa là "người chọn". Tuy nhiên trong CSS thì selector dùng để truy vấn đến các thẻ HTML. 

Như bạn biết trong một file HTML thì có rất nhiều thẻ giống nhau và thông thường chúng ta sẽ đặt các ID, class cho các thẻ để phân biệt, vậy thì trong CSS sẽ dựa vào các ID và class đó để truy xuất tới và cách truy xuất đó ta gọi là selector.

Ví dụ: Truy xuất tới tất cả các thẻ DIV và gán background cho nó màu đỏ

div{
    background: red
}

Quá đơn giản phải không nào. Bây giờ ta sẽ tìm hiểu từng loại selector cụ thể thông dụng trong CSS nhé.

2. Các CSS selector thông dụng

Có rất nhiều loại selector nhưng trong bài này chúng ta tìm hiểu một vài cách về DOM selector nhé. Trong bài này chúng ta chỉ tìm hiểu ba cách chính đó là:

• CSS Selector phân cấp
• CSS Selector ID
• CSS Selector Class

Selector phân cấp

Phân cấp nghĩa là sẽ dựa vào cấp cha để tìm cấp con.

XEM DEMO

HTML:

<div>
    <p>
        Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p.
    </p>
</div>
<p>
    Nội dung không có màu vì nó nằm ngoài thẻ p.
</p>

CSS:

div p{
    color: red
}

Như vậy để phân cấp thì ta sẽ dùng khoảng trắng (space) để ngăn cách giữa các thẻ, thẻ nào nằm đầu tiên là thẻ cha, tiếp theo là thẻ con.

Tới đây bạn sẽ có câu hỏi là nếu có 3 cấp thì làm thế nào? Bạn chỉ cần thêm bình thường như hai cấp:

HTML:

<div>
    <p>
        <strong>Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p.</strong>
        <span>Nội dung không có màu vì nó nằm ngoài thẻ p.</span>
    </p>
</div>

CSS:

div p strong{
    color: red
}

Selector ID

Bạn lưu ý là trong một trang web ID là duy nhất nhé, nghĩa là nếu bạn định nghĩa hai ID giống nhau trong 1 layout thì không đúng chuẩn giao diện của W3C. 

Giả sử bạn có nhiều thẻ div và bạn muốn viết CSS cho một thẻ DIV nào đó thôi thì bạn có thể chọn giải pháp là Selector theo ID của HTML. Chúng ta sử dụng dấu thăng (#) để đại diện cho ID.

XEM DEMO

HTML:

<div id="active">
    ACTIVE
</div>
<div>
    NON-ACTIVE
</div>

CSS:

#active{
    background: red
}

Ở đoạn code CSS trên bạn có thể viết lại thế này:

div#active{
    background: red
}

Đoạn code div#active có nghĩa tìm là thẻ div có id là active.

Selector class

Với ID là duy nhất thì class ngược lại, nghĩa là bạn có thể cho nhiều thẻ HTML có cùng tên class, điều này khá tiện lợi cho CSS. Ví dụ bạn cần style cho một số thẻ div nào đó thôi thì nếu bạn dùng ID thì không hay lắm vì phải viết nhiều lần, chính vì vậy ta sẽ chọn class. Selector cho class sẽ là dấu chấm (.).

HTML:

<div class="bg-yellow">
    Yellow
</div>
<div>
    NONE
</div>
<div class="bg-yellow">
    Yellow
</div>
<div class="bg-yellow">
    Yellow
</div>

CSS:

.bg-yellow{
    background: yellow
}

Giả sử bạn thiết lập class="bg-yellow" thêm một thẻ p nữa nhưng bạn muốn chỉ có thẻ div là có tác dụng thì làm thế nào? Đơn giản bạn chỉ cần thêm tên thẻ div đằng trước dấu chấm là được.

div.bg-yellow{
    background: yellow
}

3. Một vài lưu ý về CSS Selector

Thứ nhất bạn phải phân biệt được hai loại là ID selector và CSS 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

Thứ hai ban phải hiểu dù ID hay class thì đều tuân theo quy luật phâp cấp, nghĩa là khi truy vấn selector thì sẽ ghi cấp cha rồi tới cấp con. Ví dụ giờ viết CSS cho thẻ h2 có class="title" nằm trong thẻ  div có id="main".

div#mian h2.title{
    
}

Thứ ba hiểu được sự khác nhau giữa ghi liền và ghi có khoảng trắng giữa id hoặc class và tên thẻ. Ví dụ:

• div#main: chọn thẻ div có id="main" 
• div #mian: Chọn thẻ có id="main" nằm trong thẻ div

Ok?

4. Lời kết

Còn các selector nâng cao nhưng mình nghĩ sẽ giới thiệu ở một bài khác vì nếu đưa vào đây luôn thì sẽ hơi rối cho những bạn mới học, khi nao chúng ta nhuần nhuyễn rồi thì học tiếp cũng chưa muộn. Nhưng chung quy lại nếu bạn thuộc các selector căn bản trên là có thể cắt HTMl được rồi đó. Hy vọng qua bài này bạn sẽ hiểu được selector là gì.

Nguồn: code24h.com