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 và trong bài này 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.

<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.

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;
}

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.

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ì thẻ strong.</strong> <br/>
                <span>Nội dung không có màu vì không phải thẻ strong.</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.

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;
}

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

1. 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

2. 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{   
}

3. 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 #main: Chọn thẻ có id="main" nằm trong thẻ div