Bảng tổng hợp CSS Selector

Loại SelectorCú phápVí dụChức năng
Selector cơ bản
Universal** { margin: 0; }Chọn tất cả phần tử
Type (Element)elementp { color: red; }Chọn theo loại phần tử
Class.classname.header { font-weight: bold; }Chọn phần tử có class cụ thể
ID#idname#logo { width: 100px; }Chọn phần tử có ID cụ thể
Selector kết hợp
DescendantA Bdiv p { margin: 10px; }Chọn B là con cháu của A
ChildA > Bul > li { list-style: none; }Chọn B là con trực tiếp của A
Adjacent SiblingA + Bh2 + p { font-style: italic; }Chọn B ngay sau A (cùng cấp)
General SiblingA ~ Bh2 ~ p { color: gray; }Chọn tất cả B sau A (cùng cấp)
Selector thuộc tính
Attribute[attr][disabled] { opacity: 0.5; }Có thuộc tính
Attribute = Value[attr="val"][type="text"] { padding: 5px; }Thuộc tính có giá trị chính xác
Attribute ^= Value[attr^="val"][class^="btn-"] { cursor: pointer; }Thuộc tính bắt đầu bằng
Attribute $= Value[attr$="val"][href$=".pdf"] { color: red; }Thuộc tính kết thúc bằng
Attribute *= Value[attr*="val"][class*="col-"] { float: left; }Thuộc tính chứa chuỗi con
Attribute ~= Value[attr~="val"][class~="active"] { font-weight: bold; }Thuộc tính chứa từ hoàn chỉnh
Attribute |= Value[attr|="val"][lang|="en"] { color: blue; }Thuộc tính bắt đầu bằng từ hoàn chỉnh
Pseudo-class
Hover:hovera:hover { text-decoration: underline; }Phần tử khi di chuột qua
Active:activebutton:active { transform: scale(0.98); }Phần tử đang được kích hoạt
Focus:focusinput:focus { border-color: blue; }Phần tử đang được focus
First-child:first-childli:first-child { font-weight: bold; }Phần tử con đầu tiên
Last-child:last-childli:last-child { border-bottom: none; }Phần tử con cuối cùng
Nth-child:nth-child(n)tr:nth-child(odd) { background: #f2f2f2; }Phần tử con thứ n
Not:not(selector)div:not(.special) { opacity: 0.8; }Phần tử không khớp với selector
Pseudo-element
Before::beforep::before { content: "»"; }Tạo phần tử trước nội dung
After::aftera::after { content: " →"; }Tạo phần tử sau nội dung
First-letter::first-letterp::first-letter { font-size: 2em; }Chọn chữ cái đầu tiên
First-line::first-linep::first-line { font-style: italic; }Chọn dòng đầu tiên
Placeholder::placeholderinput::placeholder { color: #999; }Định dạng placeholder