Chủ đề nổi bật

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
Mới nhất

jQuery

Hàm jQuery Ví dụ Mô tả BỘ CHỌN (SELECTORS) $('*') $('*') Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại. $(' tag ') $('div') Chọn thành phần theo từng tag cụ thể. $('tag. ...

Tag HTML5

Tag mới trong HTML5 Tag Mô tả Trạng thái <article> Định nghĩa một bài viết, một nội dung riêng biệt. <aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar). <audio> Định nghĩa âm thanh, như nhạc hay trường audio khác.. ...

Tag HTML/XHTML

Tag HTML/XHTML DTD cho biết: thuộc tính HTML 4.01 / XHTML 1.0 DTD nào được cho phép. T=Transitional, S=Strict, và F=Frameset. Tag Mô tả HTML 4.01 XHTML 1.0 XHTML 1.1 Xác định một comment, một chú thích. TSF O <!DOCTYPE> Xác định mẫu cho văn bản HTML. TSF ...

Animation trong CSS

Animation là gì ? Animation (hay còn gọi là hiệu ứng) là tiến trình thay đổi hình dạng và tạo hiệu ứng di chuyển của các phần tử. CSS hỗ trợ rất nhiều hiệu ứng liên quan tới sự kiện chuyển động. Bảng dưới liệt kê tất cả các hiệu ứng bạn có thể sử dụng trong CSS. Để tìm hiểu chi tiết, ...

Chuyển đổi từ PX sang EM trong CSS

Chuyển đổi từ PX sang EM Như đã được trình bày trong chương Đơn vị trong CSS , một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12px thì mỗi đơn vị em sẽ là 12px, do đó 2em sẽ là 24px. Do đó, trong ...

Web Safe Font trong CSS

Tổ hợp Font trong CSS CSS3 tương thích với công nghệ tổ hợp Font. Tức là, nếu trình duyệt không hỗ trợ Font đầu tiên, thì nó sẽ cố gắng thử các Font tiếp theo. Serif Font trong CSS Font family Normal bold Georgia, serif Cau van nay duoi dang Normal Text. Cau van nay ...

User Interface trong CSS | Giao diện người dùng trong CSS

Thuộc tính user interface trong CSS cho phép bạn thay đổi bất kỳ phần tử nào vào một trong các phần tử user interface chuẩn. Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong User Interface trong CSS3: Giá trị Miêu tả appearance Cho phép người dùng làm cho các phần tử ...

Chia cột trong CSS

CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo. Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3: Giá trị Miêu tả column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill ...

Tổng hợp các màu trong CSS

Bảng dưới đây liệt kê 16 tên cùng mã màu (mã Hex code) đã được giới thiệu trong HTML 3.2. Bạn cũng có thể sử dụng các màu này trong CSS. Tên màu Giá trị Hex Code Màu aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff green #008000 ...

Responsive trong CSS | Responsive CSS là gì

Responsive CSS là gì ? Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px ...