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
- Sementara itu, kita harus menggunakan JavaScript jika perlu memilih elemen induk
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.
0kepala 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; } 6
<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; } 6 kita
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; } 0 halaman web, diwarisi oleh semua gaya di dalam halaman web. Namun ada beberapa judul seperti h2, h3, dan h4 yang digunakan di seluruh Tema di tempat yang berbeda seperti di header, judul posting, sidebar, footer, dan ditampilkan berkali-kali pada beberapa tampilan halaman posting seperti kategori dan pencarian untuk menampilkan judul posting. Heading h2 dapat terlihat berbeda di setiap tempat pada satu halaman web
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; } 0 terakhir, tambahkan HTML berikut
<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; } 1 HTML. Itu mengelilingi anak-anak, tiga paragraf HTML. Dua paragraf memiliki kelas. Ingat, kelas adalah pengidentifikasi yang dapat diulang berkali-kali di halaman web
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; } _1 berbeda dari yang lain pada file uji sebagai ID test-42
Dua kelas paragraf untuk p#test-paragraph { font-family: Impact; } 3 dan p#test-paragraph { font-family: Impact; } 4 ditetapkan berikutnya, dan paragraf terakhir tidak memiliki pengenal
Simpan file HTML dan lihat di browser web. Anda harus melihat sesuatu seperti ini
Wadah p#test-paragraph { font-family: Impact; } 5 memiliki warna font yang diatur ke magenta. Garis mana yang muncul dalam warna pink cerah itu? . Mengapa?
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; } _0 untuk menampilkan font-family. Blok pengujian baru ini mewarisi font tersebut
Mari kita ganti set font untuk seluruh dokumen untuk membuat font berbeda untuk p#test-paragraph { font-family: Impact; } 7 ini
#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; } _8
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?
elements where the parent is a