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

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.

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

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:

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.

 

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.

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

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

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

 

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

BÀI KẾ SAU
BÀI KẾ TIẾP
 

Nguồn: code24h.com

Bài liên quan

Quản trị mạng là gì? Tìm hiểu ngành quản trị mạng

Trong thời đại công nghệ số ngày nay hầu hết các thiết bị công nghệ hầu hết được gắn kết với nhau thông qua hệ thống Internet do đó vai trò của nhà quản trị mạng ngày càng được coi trọng. Nghề quản trị mạng đang ngày càng được sự quan tâm của các bạn trẻ, vậy Quản trị mạng là gì? đặc thù của nghề ...

Tạ Quốc Bảo viết 15:08 ngày 18/09/2018

Selector là gì? Tìm hiểu về Selector trong CSS

CSS là gì? Cú pháp CSS Thuộc tính background trong CSS Thuộc tính định dạng văn bản trong CSS CSS Selector có vai trò quan trọng trong code layout cho website. Dưới đây mình trình bày một số Selector căn bản, thông dụng nhất. Tìm hiểu về Selector chi tiết dưới đây! Video ...

Bùi Văn Nam viết 17:21 ngày 04/09/2018

Javascript là gì? Tìm hiểu về Javascript

Tìm hiểu biến và khai báo biến trong Javascript Tìm hiểu các hàm alert() – confirm() – prompt() trong Javascript Javascript là ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng phổ biến trong các ứng dụng Website. Nội dung ...

Vũ Văn Thanh viết 16:55 ngày 04/09/2018

HTML là gì? Tìm hiểu về HTML

Các thẻ và thuộc tính trong HTML Các thẻ định dạng văn bản trong HTML HTML là từ viết tắt của HyperText Markup Language, ý nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML là gì và tại sao nó quan trọng với website luôn là những câu hỏi của các bạn khi mới bước chân vào lập trình web. ...

Tạ Quốc Bảo viết 16:50 ngày 04/09/2018

Tìm hiểu về một số phương thức đặc biệt trong CSS selector

Mở đầu Đôi khi trong các đoạn code CSS chúng ta thường bắt gặp một số ký tự như >, +, ~ ngoài những cách viết thông thường. Vậy các ký tự này có tác dụng gì trong CSS? Trong phạm vi bài viết này mình xin giải thích rõ hơn về công dụng và cách thức hoạt động của các CSS selector này. Ví dụ ...

Bùi Văn Nam viết 15:05 ngày 12/08/2018
0