Hỏi về Syntax CSS

Nobita1 · June 13, 2021, 4:35pm

Mình đang tự học CSS, Có xem qua hết một lượt về css syntax trên w3school nhưng cũng không thấy đề cập đến syntax này.
Mọi người cho mình hỏi khi khái báo trong file css của mình, thì sự khác nhau giữa 2 cái này như thế nào vậy.
Cách 1:

.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
}

Cách 2:

.div.box { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
}

Hiện tại thì mình mới hiểu cách 2 là: nó chỉ áp dụng với những thẻ div mà khai báo class = “box”, còn cách 1 mình không hiểu nó ý nghĩa như thế nào.

Cám ơn mọi người.

yuh · June 13, 2021, 5:48pm

Những div trong box class

https://www.w3schools.com/cssref/css_selectors.asp

tonghoangvu · June 14, 2021, 1:34am

W3schools có bài về selector mà nhỉ

Duy_Hoang98 · June 14, 2021, 3:24am

ví dụ kèm html mới dễ hiểu cho b

cách 1
<div class="box"> <div></div> <div></div> <div></div> <div></div> </div>

4 thằng div con bên trong sẽ được apply

Cách 2:
<p class="div box">Hihi</p> thằng nào có class như này được apply

giinny10 · June 14, 2021, 6:49am

.box div là apply css rule cho tất cả element có tag name div nằm trong element có classname .box
cách này ko khuyến khích, vì css engine đọc từ phải sang trái, nó sẽ đệ quy kiểm tra từng thẻ đóng </div> có trên trang xem có phải con của .box ko, ở những page lớn có thể gây poor performance (syntax này tên descendant selector)
.div.box: apply css rule cho element có both classname .div & .box (này tài liệu official ko đặt tên, mà có thể search “css multiple class”)

Nobita1 · June 14, 2021, 1:36pm

Xin lỗi mọi người, do hỏi buổi tối nên mình đã đưa ra ví dụ 2 nhầm. Sửa lại cách 2 như sau:

.div box { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
}

Nghĩa là mình bỏ dấu chấm ở .div đi, thì sẽ hiểu như cách mình giải thích lúc đầu.

Cám ơn mọi người về cách giải thích cách 1 cho mình

HR16 · June 17, 2021, 8:50pm

.div box là apply css rule cho tất cả element có tag name là box (trong thực tế là custom element tạo ra bằng js) nằm trong element có class là div (thường chẳng ai đặt class name kiểu này). Cách này ý nghĩa khác nhưng cùng thuộc dạng descendant selector với cách 1. Ví dụ:

<span class="div">
    <box></box>
    <box></box>
    <box></box>
    <box></box>
</span>

Theo định nghĩa của MDN (chọn MDN vì nó dài )

The descendant combinator — typically represented by a single space character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.