Web Cơ Bản

Bộ chọn :only-child trong CSS

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ó.

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{
    các khai báo định dạng CSS
}

3) Một số ví dụ

Ví dụ:

- Chọn tất cả những phần tử bên trong <body> 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ụ
Ví dụ:

- Chọn tất cả những phần tử <div> bên trong <body> với điều kiện những phần tử <div> đó 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ụ
Ví dụ:

- Chọn tất cả các phần tử <p> nằm bên trong những phần tử <div> 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ụ