- Trang chủ
- Tham khảo
- CSS
- CSS3
- :only-child
Định nghĩa và sử dụng
- ":only-child" Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
- Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
Thành phần con duy nhất không chứa thành phần con khác có thể là:
Ghi chú: Màu xanh là màu được chọn. Màu xanh là màu được chọn.
Cấu trúc
:only-child { property: value; }
Ví dụ
HTML viết:
p tự do duy nhất
p duy nhất của li
div duy nhất của lip duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
Hiển thị trình duyệt khi chưa có CSS:
p tự do duy nhất
p duy nhất của li
div duy nhất của li
p duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
CSS viết:
p:only-child{ color: blue; }
Hiển thị trình duyệt khi đã có css:
p tự do duy nhất
p duy nhất của li
div duy nhất của li
p duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
CSS viết:
Hiển thị trình duyệt khi đã có css:
Ta thấy những thành phần được chọn đều là thành phần duy nhất có trong thành phần cha, thành phần cha không chứa thành phần khác ngoài nó.
1] Bộ chọn :only-child trong CSS
- Bộ chọn :only-child dùng để chọn tất cả các phần tử là phần tử con duy nhất của cha nó.:only-child dùng để chọn tất cả các phần tử là phần tử con duy nhất của cha nó.
2] Cách sử dụng bộ chọn :only-child trong CSS
- Để sử dụng bộ chọn :only-child, ta dùng cú pháp như sau::only-child, ta dùng cú pháp như sau:
:only-child{
các khai báo định dạng CSS
}
3] Một số ví dụ
- Chọn tất cả những phần tử bên trong với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó.
body :only-child{
border:1px solid black;
padding:10px;
}
Xem ví dụ
- Chọn tất cả những phần tử bên trong với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó.
body div:only-child{
border:1px solid black;
padding:10px;
}
Xem ví dụ
- Chọn tất cả những phần tử bên trong với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó.
div:only-child p{
border:1px solid black;
padding:10px;
}
Xem ví dụ
- Chọn tất cả những phần tử bên trong với điều kiện những phần tử đó phải là phần tử con duy nhất của cha nó.:only-child {
property: value;
}
2 CSS pseudo-class represents an element without any siblings. This is the same as :only-child {
property: value;
}
3 or :only-child {
property: value;
}
4, but with a lower specificity.
- Chọn tất cả các phần tử nằm bên trong những phần tử là phần tử con duy nhất của cha nó.
The :only-child {
property: value;
}
2 CSS pseudo-class represents an element without any siblings. This is the same as :only-child {
property: value;
}
3 or :only-child {
property: value;
}
4, but with a lower specificity. As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.
Try it
Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.
Syntax
Examples
I am an only child.
I am the 1st sibling.
I am the 2nd sibling.
I am the 3rd sibling,
but this is an only child.
Basic example
div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}
HTML
CSS
Examples
:only-child { property: value; }0
Basic example
:only-child { property: value; }1
HTML
CSS
Unknown specification # only-child-pseudo # only-child-pseudo |
Browser compatibility
BCD tables only load in the browser