Không nên xem

div {

background-color: yellow;

color: red

}

> Trước dấu {} được gọi là selector

> Selector là thẻ được chọn

> Bên trong dấu {} chứa các thuộc tính định dạng

> Đọc là: Chọn thẻ div để định dạng

Phân loại Selector:

Ex: Nếu có 3 thẻ div (1,2,3) + 2 thẻ span (4,5)

Thẻ div sẽ định dạng hết dòng, Thẻ span chỉ định dạng khu vực được chọn

1. Type selector: đặc trưng là tên thẻ

> Đọc là: Chọn thẻ div/span để định dạng

Ex:

a {} : Chọn thẻ a để định dạng

b {} : Chọn thẻ b để định dạng

textarea {} : Chọn thẻ textarea để định dạng

2. id selector: đặc trưng là dấu #

Mục tiêu (goal): Nếu chỉ muốn định dạng thẻ div thứ 2:

<div id=”convit”>Con vịt</div>

#convit {

background-color: yellow;

color: red

}

> Đọc là: Chọn thẻ có id là convit để định dạng (không có thẻ convit)

Ex:

a {} : Chọn thẻ a để định dạng

#conbo {}: Chọn thẻ có id là con bò để định dạng

b {} : Chọn thẻ b để định dạng

#conca {}: Chọn thẻ có id là con cá để định dạng

textarea {} : Chọn thẻ textarea để định dạng

3. class selector: đặc trưng là dấu .

Mục tiêu (goal): Nếu muốn định dạng con có 2 chân:

<div class=”two-legs”>Con gà</div>

<div class=”two-legs”>Con vịt</div>

.two-legs {

background-color: yellow;

color: red

}

> Đọc là: Chọn thẻ có class là two-legs để định dạng (không có thẻ class)

Ex:

a {} : Chọn thẻ a để định dạng

#conbo {}: Chọn thẻ có id là con bò để định dạng

.conrua {} : Chọn thẻ có class là con rùa để định dạng

b {} : Chọn thẻ b để định dạng

#conca {}: Chọn thẻ có id là con cá để định dạng

textarea {} : Chọn thẻ textarea để định dạng

.convit {} : Chọn thẻ có class là con vịt để định dạng

4. descendant selector: đặc trưng là khoảng trắng, khoảng trắng đọc là nằm trong

……../ div>p+span /

<div>

…….<p>

…………..<span>Span1</span> (anh)

…………..<span>Span2</span> (em)

…….<p> (anh)

…….<span>Span3</span> (em)

</div>

<span>Span4</span>

Mục tiêu (goal): Chọn thẻ span nằm trong thẻ div để định dạng

.div span {

background-color: yellow;

color: red

}

> Đọc ngược từ dấu { ra trước: Chọn thẻ span nằm trong thẻ div để định dạng

Ex:

a {} : Chọn thẻ a để định dạng

#conbo {}: Chọn thẻ có id là con bò để định dạng

.conrua {} : Chọn thẻ có class là con rùa để định dạng

div a {} : Chọn thẻ a nằm trong thẻ div để định dạng

b {} : Chọn thẻ b để định dạng

#conca {}: Chọn thẻ có id là con cá để định dạng

textarea {} : Chọn thẻ textarea để định dạng

.convit {} : Chọn thẻ có class là con vịt để định dạng

p .conco {} : Chọn thẻ có class là con cò nằm trong thẻ p để định dạng

5. child selector: đặc trưng là dấu >, dấu > đọc là con trực tiếp

Mục tiêu (goal): Chọn thẻ span là con trực tiếp của thẻ div để định dạng

Ex: div có 2 con trực tiếp là: p và Span 3

div>span {

background-color: yellow;

color: red

}

Ex:

a {} : Chọn thẻ a để định dạng

#conbo {}: Chọn thẻ có id là con bò để định dạng

.conrua {} : Chọn thẻ có class là con rùa để định dạng

div a {} : Chọn thẻ a nằm trong thẻ div để định dạng

p>i {} : Chọn thẻ i là con trực tiếp của thẻ p để định dạng

b {} : Chọn thẻ b để định dạng

#conca {}: Chọn thẻ có id là con cá để định dạng

textarea {} : Chọn thẻ textarea để định dạng

.convit {} : Chọn thẻ có class là con vịt để định dạng

p .conco {} : Chọn thẻ có class là con cò nằm trong thẻ p để định dạng

p>.connai {} : Chọn thẻ có class là con nai là con trực tiếp của thẻ p để định dạng