Liên hệ
css

Selector chọn phần tử trong CSS

Cú pháp cơ bản trong CSS, lựa chọn phần tử HTML với CSS, chọn theo id, chọn theo class và các chú thích CSS

Cú pháp CSS

CSS được viết với quy tắc về style nhằm giúp cho trình duyệt tương tác được và áp kiểu thích hợp cho các phần tử trong HTML

Quy tắc về style có ba thành phần: selector, property, value
(phần tử chọn, thuộc tính, giá trị thuộc tính)

selector {property: value}

Xem ví dụ CSS sau:

h1 { color: orange; }

Ở vị dụ trên các thành phần đó là:

  • h1selector - phần tử chọn để thiết lập các thuộc tính CSS cho nó
  • color là thuộc tính (property)
  • orange là giá trị (value) được thiết lập cho thuộc tính

Diễn giải ra CSS trên có nghĩa là: các phần tử h1 trong HTML được thiết lập màu chữ là màu cam.

Chọn phần tử trong CSS

selector

Thành phần selector chỉ ra phần tử HTML mà bạn muốn định nghĩa kiểu, chọn phần tử có thể là một phần tử hoặc nhiều phần tử cách nhau bằng dấu ,

Thiết lập nội dung style bằng cặp thuộc tính:giá trị (cách nhau bởi dấu :), mỗi cặp này kết thúc bởi ;

h1, h2 {
    color: orange;
    font-size: 25px;
}

Ở mã CSS trên, chọn phần tử h1, h2 của HTML và thiết lập màu chữ của 2 loại phần tử này là màu cam, cỡ chữ là 25px

id và selector

Chọn phần tử bằng id của phần tử, cách này áp dụng nếu phần tử HTML có thiết lập thuộc tính id (xem thuộc tính phần tử HTML), ví dụ HTML sau có phần tử div với id là intro

<div id="intro">
   <p> Văn bản trong intro.</p>
</div>
<p> Đoạn văn ngoài intro.</p>

Lúc đó CSS chọn đến phần tử có id là intro sẽ như sau:

#intro {
   color: white;
   background-color: green;
}

Văn bản trong intro.

Đoạn văn ngoài intro.

Để chọn phần tử có id, sử dụng ký hiệu hash # tiếp theo là tên id : #tên-id

class và selector

Nhắc lại: Trong phần tử HTML khi thiết lập id thì id đó là duy nhất cho phần tử (1 phần tử), còn thuộc tính class thì được phép lặp lại cho nhiều phần tử.

Chọn phần tử theo class của phần tử tương tự như chọn theo id bạn chỉ việc thay đổi ký hiệu # thành dấu chấm .

Ví dụ HTML sau có hai đoạn văn cùng classfirst

<div>
   <p class="first">Đây là một đoạn văn</p>
   <p> Đoạn văn thứ 2. </p>
</div>
<p class="first"> Đây là đoạn văn ABC</p>
<p> Đoạn văn thứ XYZ. </p>

Lúc này dùng CSS chọn phần tử pclassfirst và thay đổi cỡ chữ lên 200% thì viết CSS như sau:

.first {font-size: 200%;}

Đây là một đoạn văn

Đoạn văn thứ 2.

Đây là đoạn văn ABC

Đoạn văn thứ XYZ.

Bạn cũng nhớ quy tắc đặt tên id, class là không được bắt đầu bằng ký tự số

Chọn phần tử con trong CSS

Selector trong CSS cũng cho phép chọn ra cụ thể một phần tử nằm trong một phần tử khác. Chọn kiểu này bằng cách chỉ ra các phần tử cha theo cấp, dần dẫn đến phần tử chọn bên trong.

Ví dụ chọn phần tử <em> trong đoạn văn p đầu tiên của khối intro

<div id="intro">
   <p class="first">This is a <em> paragraph.</em></p>
   <p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>

CSS làm nhiệm vụ trên sẽ là:

#intro .first em {
   color: pink; 
   background-color:green;
}

KẾT QUẢ:

This is a paragraph.

This is the second paragraph.

This is not in the intro section.

The second paragraph is not in the intro section.

Các chú thích trong CSS

Các chú thích comment, dùng để mô tả cho code để sau này đọc lại dễ hiểu hơn. Các chú thích được trình duyệt bỏ qua.

Viết chú thích trong CSS có dạng

/* Chú thích viết ở đây */

Ví dụ:

p {
  color: green;
  /* Đây là chú thích */
  font-size: 150%;
}

Các chú thích có thể viết trên nhiều dòng

Vui lòng đăng ký ủng hộ kênh