”, thì chúng ta có thể điều chỉnh kiểu dáng của phần tử cha bằng cách giữ phần tử con. Với mục đích này, chúng ta có thể sử dụng “ :có() ' bộ chọn.

Từ cả hai phần tử “

”, hãy chọn phần tử chứa phần tử “

” bằng cách sử dụng “ .class-name:has(con-name) ”:

.parent-div : có ( h1 ) {

màu nền : #103e6d ;

màu : vỏ sò ;

bề rộng : 150px ;

chiều cao : 150px ;

bán kính đường viền : năm mươi% ;

căn chỉnh văn bản : trung tâm ;

}

Ở đây, chúng tôi đã áp dụng các thuộc tính CSS sau trên phần tử cha:

---

---

• “ màu nền ” được sử dụng để chỉ định màu nền của phần tử.
• “ màu ” chỉ định màu văn bản thành phần.
• “ bề rộng ” được sử dụng để xác định chiều rộng phần tử.
• “ chiều cao ” xác định chiều cao của phần tử.
• “ bán kính đường viền ” Thuộc tính được sử dụng để thiết lập các góc bo tròn của phần tử.
• “ căn chỉnh văn bản ” chỉ định căn chỉnh văn bản.

đầu ra

Làm cách nào để chọn tất cả các phần tử con?

Để chọn phần tử con với sự trợ giúp của bộ chọn gốc, hãy xem qua ví dụ đã cho.

Thí dụ

Thực hiện các bước sau để tạo một trang HTML:

• Thêm một phần tử div có chứa hai “

  ” thẻ và một “

  ” gắn thẻ có lớp “ div con ”.
• Đứa trẻ ' div ” chứa phần tử “

  ”:

< div tầng lớp = 'cha-div' >

< P > Xin chào < / P >

< P > thế giới < / P >

< div tầng lớp = 'div con' >

< P > tôi là div trẻ em < / P >

< / div >

< / div >

Chúng ta có thể chọn các phần tử con thông qua phần tử cha “

' tầng lớp. Điều này sẽ không chỉ chọn trực tiếp “ P ” mà còn chọn các phần tử “ lồng nhau P ” yếu tố:

.parent-div P {

màu nền : #7F167F ;

họ phông chữ : chữ ẩu ;

cỡ chữ : 25px ;

căn chỉnh văn bản : trung tâm ;

màu : khói trắng ;

}

đầu ra

Làm cách nào để chọn tất cả các phần tử con trực tiếp?

Để chọn con trực tiếp của div cha, chúng ta có thể sử dụng “ > ' Biểu tượng. Điều này sẽ giúp chọn tất cả các phần tử “p” là con trực tiếp của phần tử cha “

”. Chẳng hạn, chúng tôi đã áp dụng các thuộc tính CSS sau:

.parent-div > P {

màu nền : #7F167F ;

họ phông chữ : chữ ẩu ;

cỡ chữ : 30px ;

căn chỉnh văn bản : trung tâm ;

màu : khói trắng ;

}

Các ' họ phông chữ ” chỉ định phông chữ của thành phần được chọn và “ cỡ chữ ” được sử dụng để xác định kích thước của phông chữ:

đầu ra

Chúng ta đã thảo luận về CSS parent selector trong HTML và CSS.

Phần kết luận

Trong CSS, “ :có() ” bộ chọn được sử dụng như một lớp giả của bộ chọn cha. Nó đặc biệt được sử dụng để chọn các phần tử cha. Ví dụ, ' .parent-div:has(h1) ” chọn phần tử gốc có “

” yếu tố. Để chọn phần tử con của phần tử cha, hãy sử dụng “ .parent-div p ”. Câu lệnh điều kiện cũng có thể được sử dụng để chọn tất cả các phần tử con trực tiếp. Bài viết này đã giải thích bộ chọn cha CSS với các ví dụ.