Selector là gì? Tìm hiểu CSS Selector căn bản

  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ụ:

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.

Bài viết này được đăng tại [ không lấy phí tuts. net ]

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ì tất cả chúng ta sẽ đặt những ID, class cho những thẻ để phân biệt, vậy thì trong CSS sẽ dựa vào những 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 thuần phải không nào. Bây giờ ta sẽ tìm hiểu và khám phá từng loại selector đơn cử 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 .

Ví dụ: thiết lập color màu đỏ cho các thẻ p nằm trong thẻ div

XEM DEMO
HTML :

    Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p .

Nội dung không có màu vì nó nằm ngoài thẻ p .

CSS :

div p{
    color: red
}

Như vậy để phân cấp thì ta sẽ dùng khoảng chừng trắng ( space ) để ngăn cách giữa những thẻ, thẻ nào nằm tiên phong 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 thông thường như hai cấp :

Ví dụ: Thiết lập color màu đỏ cho thẻ strong nằm trong thẻ p và thẻ p nằm trong thẻ div.

XEM DEMO
HTML :

    

        Nội dung sẽ có màu đỏ vì nó nằm trong thẻ p.
        Nội dung không có màu vì nó nằm ngoài thẻ p.
    
Xem thêm: Ý nghĩa con số huyền thoại – Số 9 và số 6 – DỊCH VỤ GIẤY TỜ NHÀ ĐẤT ALO 

CSS :

div p strong{
    color: red
}

Selector ID

Bạn quan tâm là trong một website 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.

Ví dụ: Cho background màu đỏ cho div có id="active".

XEM DEMO
HTML :

    ACTIVE


    NON-ACTIVE

CSS :

#active{
    background: red
}

Ở đoạn code CSS trên bạn hoàn toà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 (.).

Ví dụ: thiết lập background màu vàng cho các the div có class="bg-yellow"

XEM DEMO
HTML :

    Yellow


    NONE


    Yellow


    Yellow

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:

  Xem thêm: Bật mí ý nghĩa con số 6 khi kết hợp với con số khác – Beatwiki

   chọn thẻ div có id="main" 

• div #mian: C

  họ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ì.