Phần tử cha trong CSS

CSS3 không có bộ chọn cha mẹ. Nếu CSS4 được phát hành thì có một bộ chọn CSS4 được đề xuất, $, sẽ giống như việc chọn phần tử li

• Tuy nhiên, hiện tại, mã này không thể được sử dụng trong bất kỳ trình duyệt nào

ul $li ul.sub { .. }

• Trong thời gian chờ đợi, chúng tôi sẽ phải sử dụng JavaScript nếu chúng tôi cần chọn phần tử gốc

$('ul li:has(ul.child)').addClass('has_child');

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Mỗi tài liệu HTML thực sự có thể được gọi là cây tài liệu. Chúng tôi mô tả các yếu tố trong cây giống như chúng tôi sẽ mô tả một cây gia đình. Có tổ tiên, con cháu, cha mẹ, con cái, anh chị em

Điều quan trọng là phải hiểu cây tài liệu vì bộ chọn CSS sử dụng cây tài liệu

Sử dụng tài liệu HTML mẫu bên dưới cho các ví dụ này. Phần của tài liệu được bỏ qua cho ngắn gọn

Sơ đồ của cây tài liệu HTML ở trên sẽ như thế này

tổ tiên

Tổ tiên đề cập đến bất kỳ phần tử nào được kết nối nhưng tiếp tục ở trên cây tài liệu - bất kể cao hơn bao nhiêu cấp

Trong sơ đồ bên dưới, phần tử là tổ tiên của tất cả các phần tử khác trên trang

hậu duệ

Trong sơ đồ bên dưới, tất cả các phần tử được kết nối bên dưới

phần tử là hậu duệ của phần tử đó

.

cha mẹ và con cái

Cha mẹ là một phần tử nằm ngay phía trên và được kết nối với một phần tử trong cây tài liệu. Trong sơ đồ dưới đây, các

là cha mẹ của

.

Phần tử con là một phần tử nằm ngay bên dưới và được kết nối với một phần tử trong cây tài liệu. Trong sơ đồ trên, các

Ước mơ từ lâu của các nhà phát triển front-end là có cách áp dụng CSS cho một phần tử dựa trên những gì đang xảy ra bên trong phần tử đó

Có thể chúng tôi muốn áp dụng một bố cục cho thành phần bài viết nếu có hình ảnh chính ở trên cùng và một bố cục khác nếu không có hình ảnh chính. Hoặc có thể chúng tôi muốn áp dụng các kiểu khác nhau cho một biểu mẫu tùy thuộc vào trạng thái của một trong các trường đầu vào của nó. Làm thế nào về việc cung cấp cho thanh bên một màu nền nếu có một thành phần nhất định trong thanh bên đó và một màu nền khác nếu thành phần đó không có?

Trong hai mươi năm qua, Nhóm công tác CSS đã thảo luận về khả năng này rất nhiều lần. Nhu cầu rõ ràng và được hiểu rõ. Xác định cú pháp là một nhiệm vụ khả thi. Nhưng việc tìm ra cách một công cụ trình duyệt có thể xử lý các mẫu hình tròn có khả năng rất phức tạp và vượt qua các phép tính đủ nhanh dường như là điều không thể. Các phiên bản đầu tiên của bộ chọn gốc đã được soạn thảo cho CSS3, chỉ được hoãn lại. Cuối cùng, lớp giả

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 được định nghĩa chính thức trong. Nhưng chỉ riêng việc có một tiêu chuẩn web đã không biến

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 thành hiện thực. Chúng tôi vẫn cần một nhóm trình duyệt để tìm ra thách thức thực sự về hiệu suất. Trong khi đó, máy tính tiếp tục mạnh hơn và nhanh hơn qua từng năm

Vào năm 2021, Igalia bắt đầu ủng hộ

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 giữa các nhóm kỹ sư trình duyệt, tạo mẫu ý tưởng của họ và ghi lại những phát hiện của họ về hiệu suất. Sự chú ý mới trên

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 đã thu hút sự chú ý của các kỹ sư làm việc trên WebKit tại Apple. Chúng tôi bắt đầu triển khai lớp giả, suy nghĩ về các khả năng cải tiến hiệu suất cần thiết để thực hiện công việc này. Chúng tôi đã tranh luận xem có nên bắt đầu với một phiên bản nhanh hơn với phạm vi rất hạn chế và hẹp về những gì nó có thể làm, sau đó cố gắng loại bỏ những giới hạn đó nếu có thể… hay bắt đầu với thứ gì đó không có giới hạn và chỉ áp dụng các hạn chế theo yêu cầu. Chúng tôi đã thực hiện và triển khai phiên bản mạnh mẽ hơn. Chúng tôi đã phát triển một số tối ưu hóa bộ nhớ đệm và lọc cụ thể cho

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

1 mới, đồng thời tận dụng các chiến lược tối ưu hóa nâng cao hiện có của công cụ CSS của chúng tôi. Và cách tiếp cận của chúng tôi đã có hiệu quả, chứng minh rằng sau hai thập kỷ chờ đợi, cuối cùng cũng có thể triển khai bộ chọn như vậy với hiệu suất tuyệt vời, ngay cả khi có các cây DOM lớn và số lượng lớn

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 bộ chọn

Nhóm WebKit đã xuất bản

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 trong Safari Technology Preview 137 vào tháng 12 năm 2021 và trong Safari 15. 4 vào ngày 14 tháng 3 năm 2022. Igalia đã thực hiện công việc kỹ thuật để triển khai

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 trong Chromium, sẽ xuất hiện trong Chrome 105 vào ngày 30 tháng 8 năm 2022. Có lẽ các trình duyệt khác được xây dựng trên Chromium sẽ không bị bỏ lại phía sau. Mozilla hiện đang nghiên cứu triển khai Firefox

Vì vậy, chúng ta hãy thực hiện từng bước xem các nhà phát triển web có thể làm gì với công cụ này. Hóa ra, lớp giả

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 không chỉ là một “bộ chọn cha”. Sau nhiều thập kỷ bế tắc, bộ chọn này có thể làm được nhiều hơn thế

Cơ bản về cách sử dụng. has() làm bộ chọn gốc

Hãy bắt đầu với những điều cơ bản. Hãy tưởng tượng chúng ta muốn tạo kiểu cho phần tử

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

6 dựa trên loại nội dung trong hình. Đôi khi hình bóng của chúng ta chỉ gói gọn trong một hình ảnh

<figure>
  <img src="flowers.jpg" alt="spring flowers">
figure>

Trong khi những lần khác có một hình ảnh với chú thích

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

Bây giờ, hãy áp dụng một số kiểu cho

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 sẽ chỉ áp dụng nếu có một

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8 bên trong hình

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

Bộ chọn này có nghĩa là những gì nó nói — bất kỳ phần tử

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 nào có

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8 bên trong sẽ được chọn

Đây là bản trình diễn, nếu bạn muốn thay đổi mã và xem điều gì sẽ xảy ra. Đảm bảo sử dụng trình duyệt hỗ trợ

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 — tính đến hôm nay, đó là Safari

Xem cây bút
has() demo — Các biến thể hình của Jen Simmons (@jensimmons)
trên CodePen

Trong bản trình diễn này, tôi cũng nhắm mục tiêu bất kỳ

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 nào có chứa phần tử

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

3 bằng cách sử dụng

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

4

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

Và tôi sử dụng Selector Feature Query để ẩn lời nhắc về hỗ trợ trình duyệt bất cứ khi nào trình duyệt hiện tại hỗ trợ

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

Bản thân quy tắc

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

6 đã được hỗ trợ rất tốt. Nó có thể cực kỳ hữu ích bất cứ lúc nào bạn muốn sử dụng truy vấn tính năng để kiểm tra sự hỗ trợ của trình duyệt đối với một bộ chọn cụ thể

Và cuối cùng, trong bản demo đầu tiên này, tôi cũng viết một bộ chọn phức tạp bằng cách sử dụng

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

7. Tôi muốn áp dụng

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

8 cho hình — nhưng chỉ khi hình ảnh là nội dung duy nhất. Flexbox làm cho hình ảnh kéo dài để lấp đầy tất cả không gian có sẵn

Tôi sử dụng bộ chọn để nhắm mục tiêu bất kỳ

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 nào không có bất kỳ thành phần nào không phải là hình ảnh. Nếu

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

7 có

figure:has(pre) { 
  background: rgb(252, 232, 255);
  border: 3px solid white;
  padding: 1rem;
}

8,

@supports selector(:has(img)) {
  small {
    display: none;
  }
}

3,

figure:not(:has(:not(img))) {
  display: flex;
}

3 hoặc

figure:not(:has(:not(img))) {
  display: flex;
}

4 — hoặc bất kỳ thành phần nào ngoài

figure:not(:has(:not(img))) {
  display: flex;
}

5 — thì bộ chọn không áp dụng

figure:not(:has(:not(img))) {
  display: flex;
}

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 là một điều mạnh mẽ

Một ví dụ thực tế sử dụng. has() với CSS Grid

Hãy xem bản trình diễn thứ hai mà tôi đã sử dụng

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 làm công cụ chọn chính để dễ dàng giải quyết một nhu cầu rất thiết thực

Tôi có một số thẻ giới thiệu bài viết được trình bày bằng CSS Grid. Một số thẻ chỉ chứa tiêu đề và văn bản, trong khi những thẻ khác cũng có hình ảnh. Tôi muốn thẻ có hình ảnh chiếm nhiều không gian hơn trên lưới so với thẻ không có hình ảnh

Tôi không muốn phải làm thêm việc để hệ thống quản lý nội dung của mình áp dụng một lớp hoặc sử dụng JavaScript để bố trí. Tôi chỉ muốn viết một bộ chọn đơn giản bằng CSS sẽ yêu cầu trình duyệt tạo bất kỳ thẻ xem trước nào có hình ảnh để chiếm hai hàng và hai cột trong lưới

Lớp giả

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 làm cho điều này trở nên đơn giản

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

Xem cây bút
has() demo — thẻ giới thiệu của Jen Simmons (@jensimmons)
trên CodePen

Hai bản trình diễn đầu tiên này sử dụng các bộ chọn phần tử đơn giản từ những ngày đầu của CSS, nhưng tất cả các bộ chọn có thể được kết hợp với

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7, bao gồm bộ chọn lớp, bộ chọn ID, bộ chọn thuộc tính — và các bộ tổ hợp mạnh mẽ

sử dụng. has() với tổ hợp con

Đầu tiên, đánh giá nhanh về sự khác biệt giữa và (

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

0)

Bộ kết hợp hậu duệ đã xuất hiện từ những ngày đầu của CSS. Đó là cái tên ưa thích khi chúng ta đặt khoảng cách giữa hai bộ chọn đơn giản. Như thế này

a img { .. }

Điều này nhắm mục tiêu tất cả các phần tử

figure:not(:has(:not(img))) {
  display: flex;
}

5 được chứa trong một phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, bất kể khoảng cách giữa các phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2 và phần tử

figure:not(:has(:not(img))) {
  display: flex;
}

5 trong cây HTML DOM

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

Bộ kết hợp con là tên khi chúng ta đặt một

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

0 giữa hai bộ chọn — lệnh này cho trình duyệt nhắm mục tiêu bất kỳ thứ gì khớp với bộ chọn thứ hai, nhưng chỉ khi bộ chọn thứ hai là con trực tiếp của bộ chọn thứ nhất

a > img { .. }

Ví dụ: bộ chọn này nhắm mục tiêu tất cả các phần tử

figure:not(:has(:not(img))) {
  display: flex;
}

5 được bao bọc bởi phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, nhưng chỉ khi phần tử

figure:not(:has(:not(img))) {
  display: flex;
}

5 ở ngay sau phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2 trong HTML

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

0

Với ý nghĩ đó, chúng ta hãy xem xét sự khác biệt giữa hai ví dụ sau. Cả hai đều chọn phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2, thay vì

figure:not(:has(:not(img))) {
  display: flex;
}

5, vì chúng tôi đang sử dụng

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

1

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

2

Đầu tiên chọn bất kỳ phần tử

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2 nào có

figure:not(:has(:not(img))) {
  display: flex;
}

5 bên trong — bất kỳ vị trí nào trong cấu trúc HTML. Trong khi cái thứ hai chỉ chọn một phần tử nếu

figure:not(:has(:not(img))) {
  display: flex;
}

5 là con trực tiếp của

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

2

Cả hai đều có thể hữu ích;

Xem cây bút
has() — tổ hợp con cháu so với tổ hợp con của Jen Simmons (@jensimmons)
trên CodePen

Có hai loại tổ hợp bổ sung - cả hai đều là anh em ruột. Và chính nhờ những điều này mà

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 không chỉ là một bộ chọn gốc

sử dụng. has() với các tổ hợp anh chị em

Hãy xem xét hai bộ chọn có mối quan hệ anh chị em. Có (

a img { .. }

8) và (

a img { .. }

9)

Bộ kết hợp anh chị em tiếp theo (_______43_______8) chỉ chọn các đoạn văn đứng ngay sau phần tử

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

1

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

3

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

4

Bộ kết hợp anh chị em tiếp theo (

a img { .. }

9) chọn tất cả các đoạn văn đứng sau phần tử

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

1. Chúng phải là anh em ruột, nhưng có thể có bất kỳ số lượng phần tử HTML nào khác ở giữa

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

5

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

6

Lưu ý rằng cả

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

4 và

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

5 đều chọn các thành phần của đoạn văn chứ không phải tiêu đề của

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

1. Giống như các bộ chọn khác (nghĩ về

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

7), đó là phần tử cuối cùng được liệt kê được nhắm mục tiêu bởi bộ chọn. Nhưng nếu chúng ta muốn nhắm mục tiêu vào

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

1 thì sao?

Bạn có thường xuyên muốn điều chỉnh lề trên tiêu đề dựa trên phần tử theo sau nó không? . Mã này cho phép chúng tôi chọn bất kỳ

<a>
  <figure>
    <img src="photo.jpg" alt="don't forget alt text" width="200" height="100">
  figure>
a>

1 nào có một

figure:not(:has(:not(img))) {
  display: flex;
}

3 ngay sau nó

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

7

Kinh ngạc

Điều gì sẽ xảy ra nếu chúng tôi muốn làm điều này cho tất cả sáu thành phần tiêu đề mà không cần viết ra sáu bản sao của bộ chọn. Chúng tôi có thể sử dụng

a > img { .. }

2 để đơn giản hóa mã của chúng tôi

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

8

Hoặc nếu chúng ta muốn viết mã này cho nhiều phần tử hơn là chỉ các đoạn văn thì sao?

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

9

Kết hợp

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 với , (_______40_______0), (

a img { .. }

8) và (

a img { .. }

9) mở ra một thế giới đầy khả năng. Nhưng oh, đây vẫn chỉ là bắt đầu

Trạng thái biểu mẫu tạo kiểu không có JS

Có rất nhiều lớp giả tuyệt vời có thể được sử dụng bên trong

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Trên thực tế, nó cách mạng hóa những gì các lớp giả có thể làm. Trước đây, các lớp giả chỉ được sử dụng để tạo kiểu cho một phần tử dựa trên trạng thái đặc biệt - hoặc tạo kiểu cho một trong các phần tử con của nó. Giờ đây, các lớp giả có thể được sử dụng để nắm bắt trạng thái mà không cần JavaScript và định kiểu bất kỳ thứ gì trong DOM dựa trên trạng thái đó

Các trường nhập biểu mẫu cung cấp một cách mạnh mẽ để nắm bắt trạng thái như vậy. Các lớp giả dành riêng cho biểu mẫu bao gồm

a > img { .. }

8,

a > img { .. }

9,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

00,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

01,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

02,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

03,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

04,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

05,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

06,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

07,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

08,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

09,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

10,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

11 và

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

12

Hãy giải quyết một trong những trường hợp sử dụng mà tôi đã mô tả trong phần giới thiệu — nhu cầu lâu dài về tạo kiểu cho nhãn biểu mẫu dựa trên trạng thái của trường nhập liệu. Hãy bắt đầu với một hình thức cơ bản

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

0

Tôi muốn áp dụng nền cho toàn bộ biểu mẫu bất cứ khi nào một trong các trường được lấy nét

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

1

Bây giờ tôi có thể sử dụng

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

13 để thay thế, nhưng nó sẽ hoạt động như

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

14. Lớp giả

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

15 luôn áp dụng CSS bất cứ khi nào một trường được lấy nét. Lớp giả

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

16 cung cấp một cách đáng tin cậy để tạo kiểu chỉ báo tiêu điểm chỉ khi trình duyệt vẽ một chỉ báo tiêu điểm, sử dụng cùng một phương pháp phỏng đoán phức tạp mà trình duyệt sử dụng để xác định có áp dụng vòng tiêu điểm hay không

Bây giờ, hãy tưởng tượng tôi muốn tạo kiểu cho các trường khác, những trường không được lấy nét — thay đổi màu văn bản nhãn của chúng và màu đường viền đầu vào. Trước

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7, JavaScript này yêu cầu. Bây giờ chúng ta có thể sử dụng CSS này

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

2

Bộ chọn đó nói gì? . Và thay đổi đường viền của trường nhập liệu thành

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

19

Bạn có thể thấy mã này hoạt động trong bản demo sau bằng cách nhấp vào bên trong một trong các trường văn bản. Nền của biểu mẫu thay đổi, như tôi đã mô tả trước đó. Và màu viền của nhãn và đầu vào của các trường không nằm trong tiêu điểm cũng thay đổi

Xem cây bút
có () bản trình diễn. Biểu mẫu của Jen Simmons (@jensimmons)
trên CodePen

Cũng trong bản demo này, tôi cũng muốn cải thiện cảnh báo cho người dùng khi có lỗi trong cách họ điền biểu mẫu. Trong nhiều năm, chúng tôi đã có thể dễ dàng đặt hộp màu đỏ xung quanh thông tin nhập không hợp lệ bằng CSS này

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

3

Bây giờ với

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7, chúng ta cũng có thể chuyển văn bản nhãn thành màu đỏ

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

4

Bạn có thể xem kết quả bằng cách nhập nội dung nào đó vào trang web hoặc trường email không phải là URL hoặc địa chỉ email được tạo đầy đủ. Cả hai đều không hợp lệ và vì vậy cả hai sẽ kích hoạt đường viền màu đỏ và nhãn màu đỏ, với dấu “X”

Chế độ tối chuyển đổi không có JS

Và cuối cùng, trong cùng bản demo này, tôi đang sử dụng hộp kiểm để cho phép người dùng chuyển đổi giữa chủ đề sáng và tối

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

5

Tôi đã tạo kiểu cho hộp kiểm chế độ tối bằng các kiểu tùy chỉnh, nhưng nó vẫn trông giống hộp kiểm. Với các kiểu phức tạp hơn, tôi có thể tạo nút bật tắt trong CSS

Theo cách tương tự, tôi có thể sử dụng menu chọn để cung cấp cho người dùng nhiều chủ đề cho trang web của mình

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

6

Xem cây bút
has() Demo #5 — Bộ chọn chủ đề thông qua Select by Jen Simmons (@jensimmons)
trên CodePen

Bất cứ khi nào có cơ hội sử dụng CSS thay vì JavaScript, tôi sẽ nắm lấy. Điều này dẫn đến trải nghiệm nhanh hơn và trang web mạnh mẽ hơn. JavaScript có thể làm những điều tuyệt vời và chúng ta nên sử dụng nó khi nó là công cụ phù hợp cho công việc. Nhưng nếu chúng ta có thể đạt được kết quả tương tự chỉ với HTML và CSS, điều đó thậm chí còn tốt hơn

Và nhiều hơn nữa

Nhìn qua các lớp giả khác, có rất nhiều lớp có thể được kết hợp với

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Tưởng tượng các khả năng với

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

22,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

23,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

24,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

25,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

26,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

27,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

28,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

29,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

30,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

31. Lớp giả

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

32 hoàn toàn mới được kích hoạt khi một

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

33 ở trạng thái mở. Với

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

34, bạn có thể định kiểu bất kỳ thứ gì trong DOM dựa trên việc

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

33 đang mở hay đóng

Tuy nhiên, không phải mọi pseudo-class hiện được hỗ trợ bên trong

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 trong mọi trình duyệt, vì vậy hãy thử mã của bạn trong nhiều trình duyệt. Hiện tại, các lớp giả phương tiện động không hoạt động — như

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

37,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

38,

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

39, v.v. Chúng rất có thể hoạt động trong tương lai, vì vậy nếu bạn đang đọc nó trong tương lai, hãy kiểm tra chúng. Ngoài ra, hỗ trợ vô hiệu hóa biểu mẫu hiện đang bị thiếu trong một số trường hợp cụ thể, do đó, các thay đổi trạng thái động đối với các lớp giả đó có thể không cập nhật với

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7

Safari 16 sẽ thêm hỗ trợ cho

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

41 mở ra những khả năng thú vị để viết mã xem URL hiện tại để tìm một đoạn khớp với ID của một phần tử cụ thể. Ví dụ: nếu người dùng nhấp vào mục lục ở đầu tài liệu và nhảy xuống phần của trang phù hợp với liên kết đó, thì

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

42 cung cấp một cách để tạo kiểu cho nội dung đó một cách độc đáo, dựa trên thực tế là người dùng đã nhấp vào . Và

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 mở ra những gì phong cách như vậy có thể làm

Một điều cần lưu ý — Nhóm làm việc CSS đã quyết định không cho phép tất cả các phần tử giả hiện có bên trong

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7. Ví dụ:

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

45 và

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

46 sẽ không hoạt động. Tương tự với

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

47 và

<figure>
  <img src="dog.jpg" alt="black dog smiling in the sun">
  <figcaption>Maggie loves being outside off-leash.figcaption>
figure>

48

Các. có () cuộc cách mạng

Cảm giác này giống như một cuộc cách mạng về cách chúng ta sẽ viết các bộ chọn CSS, mở ra một thế giới các khả năng trước đây là không thể hoặc thường không đáng để nỗ lực. Có vẻ như trong khi chúng ta có thể nhận ra ngay lập tức

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 sẽ hữu ích như thế nào, thì chúng ta cũng không biết điều gì thực sự có thể xảy ra. Trong vài năm tới, những người tạo bản trình diễn và tìm hiểu sâu về những gì CSS có thể làm sẽ nảy ra những ý tưởng tuyệt vời, kéo dài

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 đến giới hạn của nó

Michelle Barker đã tạo một bản trình diễn tuyệt vời kích hoạt hoạt ảnh của các kích thước rãnh Lưới thông qua việc sử dụng

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 và trạng thái di chuột. Đọc thêm về nó trong bài đăng trên blog của cô ấy. Hỗ trợ cho các bản nhạc lưới hoạt hình sẽ xuất hiện trong Safari 16. Bạn có thể dùng thử bản demo này ngay hôm nay trong Safari Technology Preview hoặc Safari 16 beta

Phần khó nhất của

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 sẽ là mở mang đầu óc của chúng ta về những khả năng của nó. Chúng tôi đã quá quen với các giới hạn áp đặt cho chúng tôi do không có bộ chọn gốc. Bây giờ, chúng ta phải phá vỡ những thói quen đó

Đó là tất cả lý do để sử dụng vanilla CSS và không giới hạn bản thân trong các lớp được xác định trong một khung. Bằng cách viết CSS của riêng bạn, tùy chỉnh cho dự án của bạn, bạn hoàn toàn có thể tận dụng mọi khả năng mạnh mẽ của các trình duyệt ngày nay

Bạn sẽ sử dụng

figure:has(figcaption) {
  background: white;
  padding: 0.6rem;
}

7 để làm gì? . tôi nóng lòng muốn xem của bạn

Phần tử cha trong CSS là gì?

Phần tử cha là phần tử nằm ngay phía trên và được kết nối với phần tử trong cây tài liệu .

Chúng ta có thể chọn phần tử cha trong CSS không?

Bộ chọn CSS bị giới hạn bởi hướng lựa chọn — có thể chọn phần tử con hoặc phần tử theo sau, nhưng không thể chọn phần tử cha hoặc phần tử trước đó

Làm cách nào để viết CSS cho lớp cha?

Nhưng nếu chúng ta muốn áp dụng một kiểu cho lớp cha thì với CSS. Đây là cách chúng ta có thể làm điều đó. .
E > F, phần tử F con của phần tử E
Bộ chọn sau đại diện cho phần tử “p” là con của “body”. cơ thể > p
Vì vậy, kiểu Trong lớp cha có thể chỉ bằng cách viết tên một lần như thế này

Làm cách nào để viết CSS từ con sang cha mẹ?

Thật dễ dàng để áp dụng kiểu cho phần tử con, nhưng nếu bạn muốn áp dụng kiểu cho lớp cha đã có phần tử con, bạn có thể sử dụng bộ kết hợp con của bộ chọn CSS ( . Ví dụ: div > p chọn tất cả các phần tử . For example, div > p selects all
elements where the parent is a
element.