Hỏi về Syntax CSS

[Nobita1 (BK Anonymous)]

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 (Huy)]

Những div trong box class

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

[tonghoangvu (Vu Tong)]

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

[Duy_Hoang98 (DS)]

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

[vivungve]

• .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 (BK Anonymous)]

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 (Gà Coder)]

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