| Universal |
* |
* { margin: 0; } |
Chọn tất cả phần tử |
| Type (Element) |
element |
p { 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ể |
| Descendant |
A B |
div p { margin: 10px; } |
Chọn B là con cháu của A |
| Child |
A > B |
ul > li { list-style: none; } |
Chọn B là con trực tiếp của A |
| Adjacent Sibling |
A + B |
h2 + p { font-style: italic; } |
Chọn B ngay sau A (cùng cấp) |
| General Sibling |
A ~ B |
h2 ~ p { color: gray; } |
Chọn tất cả B sau A (cùng cấp) |
| 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 |
| Hover |
:hover |
a:hover { text-decoration: underline; } |
Phần tử khi di chuột qua |
| Active |
:active |
button:active { transform: scale(0.98); } |
Phần tử đang được kích hoạt |
| Focus |
:focus |
input:focus { border-color: blue; } |
Phần tử đang được focus |
| First-child |
:first-child |
li:first-child { font-weight: bold; } |
Phần tử con đầu tiên |
| Last-child |
:last-child |
li: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 |
| Before |
::before |
p::before { content: "»"; } |
Tạo phần tử trước nội dung |
| After |
::after |
a::after { content: " →"; } |
Tạo phần tử sau nội dung |
| First-letter |
::first-letter |
p::first-letter { font-size: 2em; } |
Chọn chữ cái đầu tiên |
| First-line |
::first-line |
p::first-line { font-style: italic; } |
Chọn dòng đầu tiên |
| Placeholder |
::placeholder |
input::placeholder { color: #999; } |
Định dạng placeholder |