Apa itu orang tua/anak di html css?

CSS3 tidak memiliki pemilih orang tua. Jika CSS4 dirilis maka ada pemilih CSS4 yang diusulkan, $, yang akan seperti memilih elemen li

• Namun, sampai sekarang, kode ini tidak dapat digunakan di salah satu browser

ul $li ul.sub { .. }

• Sementara itu, kita harus menggunakan JavaScript jika perlu memilih elemen induk

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

CSS adalah fondasi halaman web, digunakan untuk pengembangan halaman web dengan gaya situs web dan aplikasi web. Anda dapat mempelajari CSS dari bawah ke atas dengan mengikuti Tutorial CSS dan Contoh CSS ini

Penggabung 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

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

Elemen yang cocok dengan pemilih kedua harus anak langsung dari elemen yang cocok dengan pemilih pertama. Ini lebih ketat daripada kombinator keturunan, yang mencocokkan semua elemen yang cocok dengan pemilih kedua yang memiliki elemen leluhur yang cocok dengan pemilih pertama, terlepas dari jumlah "melompat" ke atas DOM

Contoh

Pilih dan gaya setiap

elemen di mana induknya adalah a

elemen

div > p {
warna latar belakang. kuning;
}

Definisi dan Penggunaan

Pemilih elemen> elemen digunakan untuk memilih elemen dengan induk tertentu

Catatan. Elemen yang bukan anak langsung dari induk yang ditentukan, tidak dipilih

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh pemilih

elemen pemilih> elemenYa7. 0YaYaYa

Sintaks CSS

elemen > elemen {
deklarasi css;
} Demo

Dapatkan akses penuh ke Desain Web Singkatnya, Edisi ke-3, dan 60K+ judul lainnya, dengan uji coba gratis O'Reilly selama 10 hari

Ada juga acara online langsung, konten interaktif, materi persiapan sertifikasi, dan banyak lagi

Jadi di dalam elemen html ada dua elemen, head dan body. Di dalam elemen head ada dua elemen, title dan meta. Di dalam elemen body ada dua elemen, h1 dan

  
    I'm an HTML page!
    
  
  
    Hello!
    
Just a bit of text here.
  

kepala dan tubuh adalah anak-anak dari html. html adalah induk dari head dan body. judul dan meta adalah anak kepala. head adalah induk dari title dan meta. h1 dan p adalah anak-anak dari tubuh. body adalah induk dari h1 dan p

Sebuah elemen dapat memiliki banyak anak. Sebuah elemen selalu memiliki satu induk kecuali elemen tersebut, yang merupakan akar dari pohon

Hubungan Induk-Anak dari CSS berarti bahwa elemen desain induk memengaruhi elemen di dalamnya

Dalam contoh sebelumnya, deklarasi font ditentukan oleh ID tag HTML paragraf

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

<style type="text/css">
#test-paragraph {
      font-family: Impact; 
      color:red; 
      font-size:30px;
      }
</style>

<p id="test-paragraph">This is test text.</font></p>

Kami akan memindahkan font ke gaya tag paragraf

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Simpan file dan lihat di browser. Ini terlihat persis seperti contoh terakhir yang diperlihatkan di bagian tutorial sebelumnya, KECUALI bahwa semua paragraf sekarang menampilkan font Dampak

Kami hanya menginginkan font Dampak pada paragraf itu, bukan setiap teks dalam setiap paragraf di halaman pengujian HTML kami. Mari atur tag paragraf agar cocok dengan ID

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

p#test-paragraph {
      font-family: Impact; 
     }

Inilah rincian dari apa yang baru saja terjadi

• Dengan gaya paragraf diatur ke font Impact, semua paragraf mewarisi gaya itu
• Dengan mengidentifikasi bahwa kami hanya ingin mengubah paragraf dengan ID

  #test-paragraph {
        font-size:30px;
        color:red;
        }
  
  p {
        font-family: Impact; 
       }
  

  6, hanya paragraf itu yang diubah, pewarisan paragraf induk ditolak

Masuk akal?

Dalam tutorial sebelumnya, kami menggunakan yang berikut ini untuk mengubah desain div di dalam div

div div { 
      background-color: yellow;
      }

Anak diubah menjadi berbeda dari orang tua

Ini adalah bagian dari hubungan anak induk CSS. Elemen HTML di dalam elemen HTML lain mungkin mewarisi detail desain elemen induk atau elemen HTML di sekitarnya, atau memiliki rangkaian instruksinya sendiri. Pengidentifikasi menentukan gaya mana yang termasuk dalam elemen HTML mana dan instruksinya

Saat Anda bereksperimen dengan Tema WordPress, Anda akan menemukan bahwa hubungan orangtua-anak adalah salah satu tantangan terbesar yang Anda hadapi. Setiap Tema menampilkan gaya yang diatur dalam

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Bagaimana Anda menemukan gaya mana yang memengaruhi gaya lain, gaya mana yang diwarisi, dan gaya mana yang ditimpa untuk menghasilkan tampilan dan nuansanya sendiri?

Mengejar semua hubungan orang tua-anak ini membuat proses mengutak-atik Tema dengan Tema Anak menjadi tantangan, tetapi kami di sini untuk belajar. Saya dapat memberitahu Anda untuk tantangan

Eksperimen dengan Hubungan Induk/Anak CSS

Mari bereksperimen dengan Hubungan Induk/Anak CSS di file pengujian Anda

Di bagian bawah file pengujian sebelum

p#test-paragraph {
      font-family: Impact; 
     }

<div id="test-42">
<p class="salad">This is our salad paragraph.</p>
<p class="fork">This is our fork paragraph.</p>
<p>This is a paragraph not invited to lunch.</p>
</div>
<!-- This is the bottom of the test div in an HTML comment code -->

Induk dari blok kode ini adalah

p#test-paragraph {
      font-family: Impact; 
     }

Perhatikan bahwa kita memiliki elemen HTML baru dalam kode contoh. Ini adalah komentar HTML. Itu tidak akan muncul di tampilan ujung depan halaman web. Ini juga disebut sebagai dokumentasi sebaris sebagai komentar sering petunjuk lama tentang kode, apa yang dilakukannya, dan bagaimana menggunakannya. Semua kode WordPress didokumentasikan dengan cara ini untuk membantu Anda melacak jalur kode melalui situs Anda dan memberikan informasi dan instruksi

Di bagian atas file dalam gaya, mari tambahkan gaya untuk blok HTML ini

/* testing CSS child-parent relationships */
#test-42  { 
	color:magenta;
	}
.salad  {
	color:green;
	}
.fork  {
	color:blue;
	}

Perhatikan bahwa kumpulan instruksi CSS ini menampilkan garis di bagian atas dengan garis miring dan tanda bintang? . Itu tidak terlihat di tampilan ujung depan situs, hanya terlihat di dalam kode sumber

Gaya pertama mengidentifikasi

p#test-paragraph {
      font-family: Impact; 
     }

Dua kelas paragraf untuk

p#test-paragraph {
      font-family: Impact; 
     }

p#test-paragraph {
      font-family: Impact; 
     }

Simpan file HTML dan lihat di browser web. Anda harus melihat sesuatu seperti ini

Wadah

p#test-paragraph {
      font-family: Impact; 
     }

Paragraf mewarisi warna dari wadah induknya

Dua paragraf lainnya memiliki gaya yang mengatur warna teks. Mereka menentang instruksi orang tua dengan menimpa komentar orang tua untuk menyetel warna teks menjadi magenta

Dalam eksperimen awal kami, kami menyetel

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Mari kita ganti set font untuk seluruh dokumen untuk membuat font berbeda untuk

p#test-paragraph {
      font-family: Impact; 
     }

#test-42  { 
	color:magenta;
	font-family: "Times New Roman", Times, serif;
	}

Simpan file, pratinjau di browser, dan font harus berbeda untuk blok pengujian ini

Itu mencabut gaya dari induknya

Giliran Anda untuk bereksperimen dengan gaya dan warisan

Berikan setiap gaya berikut, dan atur ke apa pun yang Anda inginkan. Simpan file saat Anda pergi dan lihat tampilan browser untuk melihat apa yang berubah dan apa yang tidak. Tantangannya adalah mengatur gaya setiap paragraf secara berbeda, serta wadah yang melilit semuanya

• ukuran huruf
• warna
• batas
• lapisan
• warna latar belakang

Penantang Hubungan Induk/Anak CSS

Sejauh ini kita telah berurusan dengan hubungan orang tua-anak yang sederhana. Mari kita lihat satu blok pengujian lagi untuk membantu Anda lebih memahami kontrol yang dimiliki elemen HTML induk terhadap anaknya, dan bagaimana anak-anak melawan untuk mengontrol nasib mereka sendiri

Kali ini Anda akan melakukan pekerjaan

Tambahkan yang berikut di bawah latihan sebelumnya

<div id="wrap">
<p>This is text within the wrap parent container.</p>
<div id="one">
<p>This is text within the first div.</p>
<div id="two">
<p>This is text within the second div.</p>
</div> <!-- This is the closing DIV tag for the first DIV -->
</div> <!-- This is the closing DIV tag for the second DIV -->
</div> <!-- This is the closing DIV tag for the wrap DIV →

Tambahkan CSS ke gaya

p#test-paragraph {
      font-family: Impact; 
     }

div#wrap {

	}
div#one {

	}
div#two {

	}

Menggunakan apa yang telah Anda pelajari sejauh ini, atur CSS agar cocok dengan gambar ini. Ayolah, kamu pasti bisa melakukannya. Petunjuk?

Perhatikan teks paragraf dalam wadah bungkus berwarna hitam. Warnanya putih di DIV lainnya

Apakah warna font putih diatur di bungkusnya?

Ini hanyalah puncak gunung es dari ide desain yang bisa kita mainkan. Studi lebih lanjut tentang HTML, CSS, dan desain web akan membawa Anda dalam perjalanan melalui hubungan orang tua-anak untuk membantu Anda mengontrol hasil akhir desain

Untuk informasi lebih lanjut tentang hubungan orangtua-anak CSS, lihat

• Hubungan Elemen CSS – Little Web Hut
• Panduan Referensi Desain Web – Seperti Ibu Seperti Anak. Sekilas tentang Warisan di CSS – Peachpit
• Warisan – Praktik Terbaik Desain Web

Bagian selanjutnya dalam tutorial tentang HTML dan CSS ini mencakup pemosisian dengan CSS, yang sangat penting untuk struktur dan tata letak halaman web

Diskusi Google+ pada posting ini ada di sini, dan kami mengundang Anda untuk bergabung dengan kami dan berbicara tentang pengalaman Anda dengan tutorial dan pelajaran ini, dan perjuangan yang Anda alami dengan pewarisan CSS pada Tema WordPress

Ini adalah tutorial dari Lorelle's WordPress School. Untuk informasi lebih lanjut, dan untuk bergabung dengan Sekolah WordPress online gratis selama setahun ini, lihat

Apa itu CSS pemilih induk/anak?

Bagaimana cara menggunakan div induk dan anak di CSS?