Bagaimana Anda menulis pemilih css untuk elemen anak?

Question

Pemilih

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 CSS membantu Anda memilih elemen yang berisi elemen yang cocok dengan pemilih yang Anda teruskan ke fungsi

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

4. Ini pada dasarnya adalah pemilih "induk", meskipun jauh lebih berguna dari itu. Misalnya, bayangkan Anda dapat memilih semua

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

5 tetapi hanya jika mengandung

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

6. Itulah yang bisa kami lakukan

Table of Contents Show

Daftar Pemilih
Pengujian untuk Dukungan
Pemilih a:has(> img) { border: 20px solid white; }0 adalah bagian dari spesifikasi yang sama…
… dan juga .parent .child { color: red; }8 dan .parent .child { color: red; }9
Info lebih lanjut
Bagaimana cara menulis pemilih CSS untuk elemen anak?
Apa pemilih untuk elemen anak?
Bagaimana Anda menulis pemilih CSS?
Bagaimana cara memilih orang tua dan anak di CSS?

div:has(p) {
  background: red;
}
/*
  <div> <!-- selected! -->
     <p></p>
  <div>

  <div></div> <!-- not selected -->
  <div> <!-- not selected -->
    <section></section>
  </div>
*/

_

Meskipun tidak didukung di browser apa pun saat saya menulis, sekarang telah turun di Safari Technical Preview 137, jadi itu mulai terjadi

Sangat berguna, benar. Ini contoh lainnya. Katakanlah Anda ingin ruang setelah header Anda. Tentu saja. Sedikit

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

_7 pada

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

8 Anda harus melakukannya. Tapi… bagaimana jika ada subtitle?

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

Di sebelah kiri, spasi utama terjadi setelah h2, di sebelah kanan, spasi utama terjadi setelah subtitle

Cara saya memikirkan

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

_3 adalah ini. itu adalah pseudo-class pemilih induk. Itu adalah bahasa CSS untuk “itu memungkinkan Anda mengubah elemen induk jika memiliki anak atau elemen lain yang mengikutinya. Ini mungkin terasa aneh. Ini mungkin merusak model mental Anda tentang cara kerja CSS. Beginilah cara saya berpikir tentang CSS

.parent .child {
  color: red;
}

_

Anda hanya dapat mengatur gaya ke bawah, dari orang tua ke anak, tetapi tidak pernah memundurkan pohon.

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 benar-benar mengubah ini karena sampai sekarang belum ada pemilih induk di CSS dan ada beberapa alasan bagus mengapa. Karena cara browser mengurai HTML dan CSS, memilih induk jika kondisi tertentu terpenuhi dapat menyebabkan segala macam masalah kinerja

Jika saya duduk dan memikirkan semua cara yang mungkin saya gunakan

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 hari ini, saya agak pusing. Itu akan membuka kotak peluang pandora ini yang tidak pernah mungkin dilakukan dengan CSS saja

Contoh lain. katakanlah kita hanya ingin menerapkan gaya ke tautan yang memiliki gambar di dalamnya

a:has(> img) {
  border: 20px solid white;
}

Ini akan sangat membantu dari waktu ke waktu. Saya juga dapat melihat

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

_3 digunakan untuk menambahkan margin dan padding secara bersyarat ke elemen tergantung pada kontennya. Itu akan rapi

Pemilih

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 adalah bagian dari spesifikasi yang sama yang memiliki kelas semu

.parent .child {
  color: red;
}

4 yang sangat berguna

Anda dapat berargumen bahwa pemilih

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 CSS lebih kuat dari sekadar pemilih "induk", yang persis seperti yang telah dilakukan Bramus. Seperti pada contoh subjudul di atas, Anda pada akhirnya tidak harus memilih induk, Anda mungkin memilih induk dalam kondisi-has, tetapi kemudian pada akhirnya memilih elemen turunan dari sana

/*  Matches <figure> elements that have a <figcaption> as a child element */
figure:has(figcaption) { … }

/* Matches <img> elements that is a child of a <figure> that contains a <figcaption> child element */
figure:has(figcaption) img { … }

Di sana Anda dapat dengan cepat melihat bahwa pemilih kedua memilih anak

.parent .child {
  color: red;
}

6, bukan hanya orang tua dari

.parent .child {
  color: red;
}

7

Daftar Pemilih

Anda bisa merantainya

article:has(h2):has(ul) {

}

Atau berikan daftar pemilih

article:has(h2, ul) {

}

Dan daftarnya memaafkan. Daftar tersebut tidak lagi “memaafkan” setelah W3C mengadopsi resolusi pada Desember 2020 sebagai tanggapan atas masalah yang dilaporkan. Jadi, jika daftar pemilih berisi bahkan satu argumen yang tidak valid, seluruh daftar akan diabaikan

/* 👎 */
article:has(h2, ul, ::-blahdeath) {
  /* ::blahdeath is invalid, making the entire selector invalid. */
}

Solusinya adalah membuat pemilih yang lebih pemaaf di sana, seperti

.parent .child {
  color: red;
}

8 atau

.parent .child {
  color: red;
}

9

/* 👍 */
article:has(:where(h2, ul, ::-blahdeath)) {
  /* :where is a forgiving selector, making this valid. */
}

Pengujian untuk Dukungan

@supports(selector(:has(p))) {
  /* Supported! */
}

Pemilih a:has(> img) { border: 20px solid white; }0 adalah bagian dari spesifikasi yang sama…

Tidak seperti

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3,

a:has(> img) {
  border: 20px solid white;
}

2 memang memiliki dukungan browser yang cukup baik dan saya menggunakannya untuk pertama kali tempo hari

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

0

CodePen Embed Fallback

Itu bagus, saya juga suka betapa mudah dibacanya;

Cara lain Anda dapat menggunakan

a:has(> img) {
  border: 20px solid white;
}

_2 adalah untuk margin

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

_1

Jadi setiap elemen yang bukan item terakhir mendapat margin. Ini berguna jika Anda memiliki banyak elemen di kartu, seperti ini

CodePen Embed Fallback

… dan juga .parent .child { color: red; }8 dan .parent .child { color: red; }9

Pemilih CSS Level 4 juga memiliki spesifikasi yang sama yang memiliki

a:has(> img) {
  border: 20px solid white;
}

6 pemilih yang dapat digunakan seperti ini hari ini di banyak browser

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

_2

Info lebih lanjut

Jadi begitu.

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/*
  <div class="header-group">
    <h2>Blog Post Title</h2> <!-- main spacing applied here -->
  </div>

  <div class="header-group">
    <h2>Blog Post Title</h2>
    <div class="subtitle"> <!-- main spacing applied here -->
      This is a subtitle
    </div>
  </div>
*/

3 seharusnya cukup berguna untuk segera digunakan, dan sepupunya

a:has(> img) {
  border: 20px solid white;
}

8 dan

a:has(> img) {
  border: 20px solid white;
}

2 sudah dapat sangat membantu dan itu hanya sekilas — hanya tiga pseudo-class CSS — yang tersedia dalam spesifikasi baru ini

Bagaimana cara menulis pemilih CSS untuk elemen anak?

Kombinator anak ( > ) ditempatkan di antara dua pemilih CSS . Itu hanya cocok dengan elemen yang cocok dengan pemilih kedua yang merupakan anak langsung dari elemen yang cocok dengan yang pertama. Elemen yang cocok dengan pemilih kedua harus anak langsung dari elemen yang cocok dengan pemilih pertama.

Apa pemilih untuk elemen anak?

Pemilih anak cocok jika sebuah elemen adalah anak dari beberapa elemen. Pemilih anak terdiri dari dua atau lebih pemilih yang dipisahkan oleh ">" . Cocok dengan elemen P yang merupakan turunan dari LI; .

Bagaimana Anda menulis pemilih CSS?

Pemilih id CSS . Id dari suatu elemen adalah unik di dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih satu elemen unik. Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen .

Bagaimana cara memilih orang tua dan anak di CSS?

Elemen>pemilih elemen digunakan untuk memilih elemen dengan induk tertentu. Catatan. Elemen yang bukan anak langsung dari induk yang ditentukan, tidak dipilih.

kode css