Selectors - quy tắc chọn phần tử

Selector quy tắc dùng để tìm (hoặc chọn) phần tử HTML để áp dụng khối css (style).

Phân loại selector
Simple selector - Quy tắc chọn cơ bản
Combinator selector - kết hợp selector
Attribute selector - Chọn theo thuộc tính
- Chọn phần tử có thuộc tính
- Chọn phần tử theo giá trị thuộc tính
Pseudo class selector - Chọn phần tử có trạng thái

Phân loại selector

Ta có thể phân loại selector trong CSS ra làm năm loại sau:

Simple selector: chọn các phần tử dựa vào tên thẻ, id, class
Combinator selector: Chọn các phần tử dựa vào mỗi quan hệ cụ thể nào đó (phần tử con, cháu, cùng cấp …)
Attribute selector: Chọn các phần tử có thuộc tính nào đó hoặc có giá trị thuộc tính nào đó (vd: [link], [data=abc] …)
Pseudo-class selector: Chọn các phần tử có trạng thái nào đó (vd: :hover, :active…)
Pseudo-element selector: Chọn các phần tử có vị trí đặc biệt, một phần của phần tử (vd: :last-child, :first-child …)

Simple selector - Quy tắc chọn cơ bản

Chọn phần tử theo tên thẻ

Chọn phần tử theo tên thẻ như: a,b,p,i,div ….

Cú pháp:

tên-thẻ{
	thuộc-tính: giá-trị;
	thuộc-tính: giá-trị;
}

VÍ dụ:

p{
	color: red;
	font-size: 14px;
}

Ở ví dụ trên ta định dạng tất cả thẻ p trong văn bản sẽ có màu đỏ và kích thước chữ là 14px

Chọn phần tử theo id

Ta sử dụng dấu # trước giá trị thuộc tính id của phần tử.

Cú pháp: #id-name

VÍ dụ ta muốn chọn thẻ có thuộc tính id="para1" để áp dụng style màu xanh thì làm như sau:

#para1{
color: green;
}

Chọn phần tử theo class

Để chọn phần tử có class cụ thể ta dùng dấu . trước tên class đó

Cú pháp : .class-name

Ví dụ: Tất cả các phần tử có class="red" sẽ được căn giữa và có chữ màu vàng.

.red{
	text-align: center;
  	color: yellow;
}

Chọn tất cả (*)

Ta dùng dấu * để chọn tất cả phần tử.

Ví dụ sau: Áp dụng chữ đậm và có màu đỏ cho tất cả phần tử

*{
	font-weight: bold;
	color: red;
}

Combinator selector - kết hợp selector

Để khoanh vùng các phần tử, giúp chọn chính xác hơn ta dùng cách sau.

Chọn cấp con

Dùng dấu > ở giữa cấp cha và con.

Cú pháp selector1 > selector2 , hoặc nhiều cấp selector1 > selector2 > selector3 > … > selectorn

Ví dụ chọn tất cả các thẻ p có cấp cha là thẻ div để áp dụng: màu đỏ, chữ đậm.

div > p{
	color: red;
	font-weight: bold;
}

Chọn cấp con , cháu … (hậu duệ)

Dùng khoảng cách giữa hai selector để chọn hậu duệ.

Cú pháp selector1 selector2 selector3

Ví dụ chọn tất cả thẻ span mà tổ tiên của nó có class="red"

.red span{
	color: blue;
	font-size: 15px;
}

Chọn phần tử liền sau

Dùng dấu + để chọn phần tử liền sau nó

Cú pháp selector1 + selector2

VD: strong + span

Chọn các phần tử phía sau

Dùng dấu ~ để chọn các phần tử phía sau một phần tử nào đó.

Cú pháp selector1 ~ selector2

VD: b ~ span

Chọn thẻ có class

Cú pháp tag-name.class-name

Muốn chọn thẻ p có class="para1" thì ta viết như sau: p.para1

Attribute selector - Chọn theo thuộc tính

Chọn phần tử có thuộc tính

Để chọn phần tử có thuộc tính đặc biệt ta viết thuộc tính giữa cặp dấu []

Cú pháp [attribute]

Ví dụ sau áp dụng màu đỏ cho các phần tử có thuộc tính href

[href]{
	color: red;
}

Chọn phần tử theo giá trị thuộc tính

Cú pháp [attribute=value]

Ví dụ sau áp dụng màu đỏ cho phần tử có thuộc tính value="2"

[value=2]{
	color: red;
}

Pseudo class selector - Chọn phần tử có trạng thái

Cú pháp :trạng-thái

Ví dụ sau chọn màu đỏ cho tất cả phần tử p có trạng thái hover

p:hover{
	color: red;
}