Pemilih khusus di CSS. Pemilih atribut tetangga, anak, kontekstual, dan tag. Memeriksa keberadaan node anak. Salah satu dari beberapa nilai atribut
Salam, para pembaca yang budiman. Pada artikel sebelumnya kita mempelajari terutama atributnya gaya CSS. Ada banyak dari mereka. Beberapa mengatur parameter font, yang lain mengatur parameter latar belakang, dan yang lain lagi mengatur parameter indentasi dan bingkai.
Pada artikel ini kita akan berbicara tentang penyeleksi gaya. Di salah satu artikel yang sudah kami singgung. Hari ini kita akan melihat beberapa jenis penyeleksi yang tidak secara eksplisit mengikat aturan gaya ke elemen halaman web. Inilah yang disebut penyeleksi khusus. Ada beberapa jenis di antaranya.
Kombinator dalam CSS (Pemilih Berdekatan, Anak, dan Konteks)Kombinator adalah jenis pemilih CSS yang mengikat aturan gaya ke elemen halaman web berdasarkan lokasinya relatif terhadap elemen lainnya.
Kombinator pertama adalah simbol plus (+) atau pemilih yang berdekatan. Plus diatur di antara dua pemilih:
+ { }
Gaya dalam hal ini diterapkan pada pemilih 2, tetapi hanya jika berdekatan dengan pemilih 1 dan datang tepat setelahnya. Mari kita lihat sebuah contoh:
kuat + aku (
}
...
Ini adalah teks biasa. Ini teks tebal, teks biasa, teks merah
Ini adalah teks biasa. Ini adalah teks tebal, teks biasa, dan ini adalah teks biasa.
Hasil:
Gaya yang dijelaskan dalam contoh hanya akan diterapkan pada teks pertama yang disertakan dalam tag , Karena itu muncul tepat setelah tag .
Kombinator tilde (~) juga berlaku untuk penyeleksi yang berdekatan, namun kali ini mungkin ada elemen lain di antara keduanya. Dalam hal ini, kedua penyeleksi harus disarangkan dalam tag induk yang sama:
~ { }
Gaya akan diterapkan pemilih 2 yang harus diikuti pemilih 1. Perhatikan sebuah contoh:
kuat~ aku(
warna: merah; /* Warna teks merah */
}
...
Ini adalah teks biasa. Ini adalah teks tebal, teks biasa, teks merah aturan pemilih yang berdekatan diterapkan padanya.
Ini adalah teks biasa. Ini adalah teks tebal, teks biasa, dan ini teks berwarna merah.
Hasil:
Seperti yang Anda lihat, kali ini aturan gaya berfungsi untuk kedua teks yang diapit dalam tag , meskipun faktanya dalam kasus kedua di antara tag Dan layak untuk diberi label .
Kombinator > mengacu pada penyeleksi anak. Memungkinkan Anda mengikat gaya CSS ke elemen halaman web yang secara langsung bersarang di dalam elemen lain:
> { }
Gaya akan terikat pada pemilih 2, yang langsung disarangkan pemilih 1.
div > kuat (
}
...
Ini adalah teks biasa. Ini adalah teks miring tebal.
Ini adalah teks biasa. Dan ini adalah teks tebal biasa.
Dan hasilnya:
Seperti yang Anda lihat pada gambar, aturan gaya hanya memengaruhi tag pertama , yang bersarang langsung di dalam tag . Dan induk langsung dari tag kedua adalah tagnya
, jadi aturan itu tidak berlaku untuknya.
Selanjutnya kita akan melihat pemilih konteks. Ini memungkinkan Anda untuk mengikat gaya CSS ke elemen yang disarangkan di dalam elemen lain, dan bisa ada tingkat penyarangan apa pun:
{ }
Gaya akan diterapkan pemilih 2, jika entah bagaimana itu bersarang di dalamnya pemilih 1.
Mari kita perhatikan contoh sebelumnya, hanya jika Deskripsi CSS aturan menerapkan pemilih konteks:
div kuat(
gaya font: miring /* Miring */
}
...
Ini adalah teks biasa. Ini adalah teks miring tebal.
Ini adalah teks biasa. Dan ini juga teks miring dan tebal.
Teks biasa dan hanya teks tebal
Hasil:
Seperti yang Anda lihat, kali ini aturan tersebut memengaruhi kedua tag , bahkan yang bersarang di dalam wadah dan dalam satu paragraf
. Untuk menandai , yang hanya disarangkan dalam satu paragraf
Aturan css tidak berfungsi sama sekali.
Pemilih berdasarkan atribut tagPemilih atribut adalah penyeleksi khusus yang mengikat gaya ke suatu elemen berdasarkan apakah elemen tersebut berisi atribut tertentu atau memiliki nilai tertentu. Ada beberapa opsi untuk menggunakan penyeleksi tersebut.
1. Pemilih atribut sederhanaSepertinya:
[] { }
Dan itu mengikat gaya ke elemen-elemen di dalamnya yang ditambahkan atribut yang ditentukan. Misalnya:
kuat(
warna: merah;
}
...
Mobil adalah motor mekanis jalan tanpa jejak kendaraan dengan minimal 4 roda.
Hasil:
Pada gambar Anda dapat melihat bahwa aturan css (warna teks merah) diterapkan pada elemen kuat, yang atributnya ditambahkan judul.
2. Pemilih atribut dengan nilaiSintaks untuk pemilih ini adalah sebagai berikut:
[=] { }
Mengikat gaya ke elemen yang tagnya memiliki atribut dengan yang ditentukan nama Dan arti. Contoh:
A(
warna: merah;
ukuran font:150%;
}
...
.ru" target="_blank">Tautan di jendela baru
Hasil:
Seperti yang Anda lihat, kedua elemen bertipe hyperlink memiliki atribut target, tetapi aturan css yang memperbesar teks tautan satu setengah kali dan mengubah warnanya menjadi merah diterapkan pada tag atribut siapa target penting "_kosong".
3. Salah satu dari beberapa nilai atributBeberapa nilai atribut mungkin dipisahkan dengan spasi, seperti nama kelas. Untuk menetapkan aturan gaya ketika nilai yang diperlukan ada dalam daftar nilai atribut, gunakan pemilih berikut:
[~=] { }
[~=] { }
Gaya diterapkan jika atribut memiliki nilai yang diperlukan atau merupakan bagian dari daftar nilai yang dipisahkan spasi. Misalnya:
{
warna: merah;
ukuran font:150%;
}
...
Telepon kami: 777-77-77
Alamat kami: Jalan Moskow. Soviet 5
Anda akan mendapatkan hasil sebagai berikut:
Aturan tersebut berlaku untuk elemen yang nilai atributnya meliputi: kelas ada maksudnya telp.
4. Tanda hubung pada nilai atributTanda hubung diperbolehkan dalam pengidentifikasi dan nilai kelas. Untuk mengikat gaya ke elemen yang nilai atributnya mungkin berisi tanda hubung, Anda dapat menggunakan konstruksi berikut:
[atribut|="nilai"] ( gaya )
Pemilih[atribut|="nilai"] ( gaya )
Gaya ini diterapkan pada elemen yang nilai atributnya dimulai dengan nilai yang ditentukan diikuti dengan tanda hubung. Misalnya:
{
warna: merah;
ukuran font:150%;
}
...
Hasil:
Dalam contoh ini, aturan gaya hanya berlaku untuk elemen daftar yang nama kelasnya dimulai dengan nilai "menu- ".
5. Nilai atribut dimulai dengan teks tertentuPemilih ini menetapkan gaya untuk suatu elemen jika nilai atribut tag dimulai dengan nilai tertentu. Mungkin ada dua opsi:
[^=] { }
[^=] { }
Dalam kasus pertama gaya berlaku untuk semua elemen yang tagnya memiliki atribut dengan yang ditentukan nama dan nilai yang dimulai dengan yang ditentukan substring. Dalam kasus kedua, hal yang sama, hanya untuk elemen tertentu yang ditentukan dalam pemilih utama. Contoh:
A(
warna: hijau;
berat font: tebal;
}
...
Hasil:
Contoh tersebut menunjukkan cara menampilkan tautan eksternal dan tautan internal secara berbeda. Tautan eksternal selalu dimulai dengan baris “http://”. Oleh karena itu, dalam pemilih kami menunjukkan bahwa gaya hanya akan diterapkan pada tautan yang memiliki atribut tersebut href dimulai dengan makna http://.
6. Nilai atribut diakhiri dengan teks tertentuMengikat gaya ke elemen yang nilai atributnya diakhiri dengan teks yang ditentukan. Memiliki sintaks berikut:
[$=] { }
[$=] { }
Dalam kasus pertama gaya berlaku untuk semua elemen yang memilikinya atribut dengan yang ditentukan nama dan mempunyai arti berakhir dengan yang ditentukan substring. Dalam kasus kedua, hal yang sama, hanya untuk yang ditunjukkan penyeleksi. Dengan cara ini, misalnya, Anda dapat menampilkan berbagai format gambar grafis. Misalnya:
IMG (
batas: 5px merah solid;
}
...
gambar GIF
Format gambar png
Hasil:
Contohnya adalah semua gambar dari ekstensi gif akan ditampilkan dengan batas merah setebal lima piksel.
7. Nilai atribut berisi string yang ditentukanPemilih ini mengikat gaya ke tag yang nilai atributnya berisi teks tertentu. Sintaksis:
[*=] { }
[*=] { }
Gaya berikatan dengan elemen yang dimilikinya atribut dengan nama yang ditentukan dan nilainya berisi yang ditentukan substring. Misalnya:
IMG (
batas: 5px merah solid;
}
...
Gambar dari folder galeri
Gambar dari folder lain
Hasil:
Dalam contoh, gaya diterapkan pada gambar yang dimuat dari folder "galeri".
Itu semua tentang penyeleksi atribut. Semua metode di atas dapat digabungkan satu sama lain:
Pemilih[atribut1="nilai1"][atribut2="nilai2"] ( gaya )
Selain itu, izinkan saya mengingatkan Anda tentang pemilih CSS khusus:
- menggunakan simbol “+” dan “~” terbentuk;
- simbol “>” mengikat gaya CSS ke tag anak;
- simbol membentuk pemilih konteks.
Di artikel mendatang kita juga akan melihat elemen semu dan kelas semu yang menyediakan alat yang ampuh manajemen gaya.
Itu saja, sampai jumpa lagi.
Halo, para pembaca yang budiman! Kami melanjutkan topik penyeleksi CSS dan hari ini saya akan mencoba menjelaskan dengan jelas apa yang berdekatan Pemilih CSS, dan juga peran apa yang dimainkan oleh pemilih universal. Pengetahuan tentang mekanisme penggunaan semua jenis alat CSS akan memungkinkan Anda mencapai konten dokumen yang optimal dan ringkas, yang menggambarkan gaya elemen, yang merupakan salah satu komponen keberhasilan promosi sumber daya Anda, jadi jangan pernah mengabaikan kesempatan untuk mendapatkannya informasi yang berguna tentang konsep selektor dan macam-macam jenisnya.
Jika Anda mengingat dan mengikuti publikasi dengan cermat, banyak jenis penyeleksi telah dipertimbangkan; ; . Sekali lagi saya mengimbau Anda untuk tidak mengabaikan belajar Dasar-dasar CSS, karena ini akan memberi Anda banyak keuntungan di masa depan.
Pemilih universalSekarang mari kita langsung ke intisari publikasi hari ini. Sedangkan untuk selektor universal cukup sederhana, jadi saya tidak akan membahasnya terlalu lama. Sintaks penulisan aturan CSS yang menggunakan universal selector adalah sebagai berikut:
Di sini operator “*” berarti kita memiliki pemilih universal. Ini digunakan ketika diperlukan untuk menginstal gaya seragam untuk semua elemen pada halaman web. Terkadang pemilih universal tidak diperlukan. Misalnya, entri .*class dan .class benar-benar identik dalam kasus ini. Sekarang yang pasti sebuah contoh. Biasanya yang paling umum adalah menentukan font yang konsisten, ukuran dan warna, serta penempatan teks biasa pada halaman blog atau situs web.
* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* Font teks */ warna: #646464; /* Warna teks */ ukuran font: 75%; /* Ukuran teks */ perataan teks : kiri; /* Lokasi teks */ )
Dengan cara ini Anda dapat menentukan desain teks untuk semua elemen yang terletak di halaman. Izinkan saya mencatat bahwa dalam hal ini hasilnya akan serupa jika, alih-alih pemilih universal, Anda menggunakan nama tag body, yang menyertakan tag semua elemen.
Pemilih CSS yang BerdekatanNah, sekarang mari kita luangkan lebih banyak waktu pada penyeleksi yang berdekatan. Elemen pada halaman web didefinisikan sebagai berdekatan ketika elemen tersebut muncul tepat bersebelahan dalam kode dokumen. Dalam hal ini, sintaks gaya CSS terlihat seperti ini:
Sekarang ambil paragraf teks yang ditentukan oleh tag p, yang akan menyertakan tag b, i, dan besar sebagai elemen anak, yang menentukan format teks, masing-masing, font tebal, miring, dan diperbesar:
Paragraf ini menggunakan tag b, tandai saya, tandai besar.
Dan dengan bantuan alat pengeditan CSS dan HTML yang ada di dalamnya versi terbaru setiap orang browser populer( , ) dan yang merupakan analog dari plugin terkenal untuk peramban Firefox(), masukkan paragraf ini di mana saja di halaman web mana pun (saya melakukannya tepat di halaman artikel sebelumnya sebagai paragraf pertama). Alat ini, misalnya, di Chrome dipanggil hanya dengan menekan tombol F12. Ini dapat digunakan untuk mengkonsolidasikan materi secara praktis dalam judul “ Dasar-dasar HTML" dan "Tutorial CSS". Jadi, saya menyisipkan sepotong teks sebagai paragraf pertama:
Paragraf ini bersifat eksperimental dan, dengan menggunakan contohnya, kami akan mempertimbangkan penggunaan penyeleksi yang berdekatan. Seperti yang saya katakan, tag b, i, dan big adalah anak dari tag paragraf p karena semuanya langsung berada di dalam wadah p. Di sini tag yang berdekatan adalah b dan i, serta i dan big. Sekarang mari kita melamar aturan CSS untuk penyeleksi yang berdekatan:
B+i (warna: merah;) i+besar (warna: hijau;)
Setelah gaya ini diterapkan, paragraf akan terlihat seperti ini:
Hal ini berlaku untuk semua tag halaman web yang mengandung elemen b, i, dan besar. Selain itu, b dan i, i dan big harus berdekatan; untuk kombinasi lain, aturan CSS ini tidak akan berfungsi. Saya rasa sekarang sudah jelas bagi Anda bagaimana penyeleksi yang berdekatan digunakan saat menulis atau mengedit dokumen CSS. Sangat lain catatan penting: jika Anda perhatikan, dalam kasus elemen yang berdekatan, gaya yang ditentukan hanya diterapkan pada elemen kedua.
Contoh paragraf yang dibahas sangat jelas dan memungkinkan Anda dengan cepat memahami esensi dari penyeleksi yang berdekatan di CSS. Namun, dalam praktiknya, area penerapan penyeleksi yang berdekatan lainnya biasanya digunakan. Misalnya, sering kali perlu menyertakan beberapa bagian teks di badan artikel, terutama yang diformat, seperti catatan kaki, catatan, dll.
Untuk keperluan tersebut, mereka biasanya membuat kelas tersendiri dan menerapkannya pada paragraf yang diinginkan. Namun cara yang jauh lebih optimal adalah dengan menggunakan penyeleksi yang berdekatan. Misalnya, di blog saya ada gaya yang dibuat untuk menata gaya header h3 biasa.
H3 ( ukuran font: 1,7em; /* Ukuran font */ perataan teks: tengah; /* Penempatan teks */ berat font: normal; /* Berat teks normal */ keluarga font: Tahoma, Arial, Helvetica, sans-serif; /* Gaya font */ warna: #646464; /* Warna teks */ )
Untuk menyorot judul catatan atau catatan kaki, mari kita tentukan kelas khusus, misalnya:
H3.put ( warna: merah; /* Warna teks */ margin-kiri: 5px; /* Padding kiri */ margin-atas: 0,5em; /* Padding atas */ padding: 10px; /* Margin di sekitar teks */ perataan teks: kiri; /* Lokasi teks */ )
Sekarang mari kita gunakan pemilih yang berdekatan untuk membuat gaya khusus untuk paragraf catatan kaki, paragraf ini akan ditempatkan tepat di bawah judul dengan gaya "h3.put":
H3.put+p ( latar belakang: #ffefd5; /* Warna latar belakang */ margin-kiri: 15px; /* Padding kiri */ margin-kanan: 120px; /* Padding kanan */ margin-top: 0.5em; /* Padding atas */ padding: 5 piksel; /* Margin di sekitar teks */ )
Sekali lagi menggunakan alat untuk Pengeditan Google Chrome, yang sudah lama saya minati (tapi itu sepadan), masukkan judul untuk catatan kaki, jangan lupa untuk memasukkan kelas put untuknya:
Perhatian!
Kemudian kita menulis teks catatan kaki itu sendiri:
Materi yang disajikan dalam publikasi ini sangat penting dalam rangka mempelajari dasar-dasar CSS ( tabel bertingkat gaya)
.Setelah semua gerakan ini, kita mendapatkan paragraf catatan kaki berikut di halaman web (saya ingatkan Anda bahwa saya menyisipkan paragraf ini di akhir artikel saya sebelumnya tentang pemilih anak dan konteks):
Sekarang di blog atau situs web, ketika Anda mengikat kelas “put” ke tag h3 apa pun, catatan kaki seperti itu akan muncul di halaman web. Selain itu, hanya paragraf pertama setelah tag h3 dengan “class=“put”” yang akan diformat dengan cara khusus. Tapi itulah yang kami inginkan, bukan?
Dengan ini, izinkan saya menyelesaikan manual hari ini, yang berisi algoritma untuk menggunakan penyeleksi yang berdekatan dan juga universal. Saya harap artikel ini dapat mendorong Anda, para pembaca yang budiman, untuk berlangganan
Pemilih elemen yang berdekatan memilih elemen yang terletak tepat di belakang elemen lain dalam kode dokumen elemen yang diberikan. Mari kita ambil sepotong kode html sebagai contoh.
Sebuah paragraf dan ada elemen tebal di dalamnya, dan ini dia cenderung elemen.
Ada tiga tag:
, Dan . Tag dan bersarang di sebuah wadah
Mereka adalah anak-anaknya. Namun dalam hubungannya satu sama lain, mereka bertetangga.
Sintaks dari selector yang berdekatan adalah selector elemen sebelumnya, diikuti dengan tanda “+”, diikuti dengan selector dari elemen yang dipilih. Mari kita kerjakan pemilih yang berdekatan:
Pemilih yang berdekatan di CSS.
Sebuah paragraf dan ada elemen tebal di dalamnya, dan ini dia cenderung elemen.
b+i ( warna: merah; ) Itu gemuk dan ditekankan cenderung.
elemen, lebih lanjut Dalam contoh ini Anda dapat melihat bahwa pemilih elemen yang berdekatan dipicu di paragraf pertama. Berikut tag dan pergi satu demi satu. Dan di paragraf kedua, tag digunakan di antara keduanya , sekarang ada dua pasang tag lain yang berdekatan: + + .
Dan Kesalahan dalam dalam hal ini
akan menganggap tag berdekatan dengan tag
Di sini tagnya adalah anak dari tag tersebut
Dan dia, pada gilirannya, adalah orang tua.
Contoh di bawah ini tidak akan berfungsi:
Sebuah paragraf dan ada elemen tebal di dalamnya, dan ini dia cenderung elemen.
b+i ( warna: merah; ) Itu gemuk dan ditekankan cenderung.
Pemilih yang berdekatan di CSS.p+b ( color: red; ) // Tidak ada tetangga seperti itu di kode. Contoh yang lebih nyata Mari kita lihat lebih dekat cara kerja pemilih tetangga.
contoh nyata
. Pada artikel berukuran besar yang berisi beberapa bagian yang ditandai dengan tag, disarankan untuk menambah margin atas (properti margin-top). Indentasi 30px akan membuat teks dapat dibaca. Namun jika tag muncul tepat setelahnya, dan ini mungkin berada di awal artikel, indentasi atas di atas tag akan menjadi mubazir. Masalah ini dapat diselesaikan dengan menggunakan pemilih elemen yang berdekatan.
Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Pemilih tetangga di CSS h1 ( margin-bottom: 0px; ) h2 ( margin-top: 50px; ) h1+h2 ( margin-top: 0px; ) Halo! Judul h2 Judul h2Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Pemilih tetangga di CSS h1 ( margin-bottom: 0px; ) h2 ( margin-top: 50px; ) h1+h2 ( margin-top: 0px; ) Halo! Judul h2 Judul h2Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Teks paragrafnya adalah tentang petualangan yang luar biasa.
Judul h2
Selain itu, dengan menggunakan alat pemilih yang berdekatan, akan lebih mudah untuk menyesuaikan lekukan antara judul dan paragraf pertama bagian, dalam contoh kita ini adalah tag dan
Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Pemilih tetangga di CSS h1 ( margin-bottom: 0px; ) h2 ( margin-top: 50px; ) h1+h2 ( margin-top: 0px; ) Halo! Judul h2 Judul h2Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Pemilih tetangga di CSS h1 ( margin-bottom: 0px; ) h2 ( margin-top: 50px; ) h1+h2 ( margin-top: 0px; ) Halo! Judul h2 Judul h2Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Pemilih tetangga di CSS h1 ( margin-bottom: 0px; ) h2 ( margin-top: 50px; ) h1+h2 ( margin-top: 0px; ) Halo! Judul h2 Judul h2Berikut adalah kode html dengan contoh cara kerja pemilih elemen yang berdekatan.
Perlu juga dicatat bahwa untuk mengurangi lekukan, akan lebih mudah jika menggunakan nilai negatif.
Pemilih yang berdekatan di CSS h2 ( margin-top: 50px; ) h1+h2 ( margin-top: -20px; ) h2+p ( margin-top: -1em; ) Halo! Judul h2
- Sekarang contoh bagaimana menggunakan pemilih yang berdekatan untuk memilih semua elemen daftar kecuali yang pertama.
- Pemilih tetangga di CSS li+li ( warna: merah; )
- Daftar item #1.
- Daftar item #2.
Daftar item #3.
Daftar item #4.
Inilah yang akan terjadi akibat contoh ini:
Gambar 1. Contoh No. 5 di tempat kerja.Setiap elemen pada halaman web dapat dihubungkan ke elemen lain menggunakan salah satu hubungan berikut:
- elemen induk, leluhur langsung - elemen yang berisi satu atau lebih elemen yang bersarang di dalamnya. Sehubungan dengan unsur-unsur yang tertanam dalam dirinya, dia adalah orang tua mereka;
- elemen anak, keturunan langsung, anak, anak - elemen yang bersarang di elemen induk dan terkait dengannya adalah elemen anak, mis. anaknya;
- elemen tetangga, saudara kandung (saudara laki-laki atau perempuan) - elemen yang memiliki satu orang tua yang sama. Unsur-unsur tersebut merupakan saudara kandung (tetangga) dalam hubungannya satu sama lain.
Perhatikan contoh berikut:
Kode ini dapat direpresentasikan sebagai diagram berikut:
Pada contoh di atas, mari pilih elemen p dan lihat hubungannya dengan elemen lain dalam kode:
- Elemen induknya adalah div ;
- Elemen yang berdekatan adalah h1;
- Keturunan langsung, anak – elemen kuat, em.
Dalam pemilih ini, elemen1 dan elemen2 dihubungkan melalui hubungan leluhur-keturunan. Itu. digunakan untuk memilih elemen2 yang terletak di dalam elemen1 di dokumen HTML. Dengan kata lain, ia memilih semua elemen2 yang merupakan turunan dari elemen1.
Misalnya, pilih dan beri gaya pada setiap elemen p yang merupakan turunan dari elemen div:
Div p ( warna:merah; )
Teks 1
Teks 2
Teks 4
teks 5
Elemen1 > Elemen2Dalam pemilih ini, elemen1 dan elemen2 dihubungkan oleh hubungan induk > anak. Itu. ini digunakan untuk memilih elemen2 yang merupakan anak dari elemen1. Dengan kata lain, ia memilih semua elemen2 yang memiliki elemen1 sebagai induk langsungnya.
Misalnya, pilih dan beri gaya pada setiap elemen p yang induknya adalah elemen div:
Div > p ( warna:merah; )
Teks 1
Teks 2
teks 5
Elemen1 + Elemen2Pemilih Elemen1 + Elemen2 dirancang untuk memilih elemen2 yang terletak tepat setelah elemen1, dan mereka bertetangga satu sama lain. Dengan kata lain, selector ini digunakan untuk memilih elemen2 yang letaknya tepat setelah elemen1, dan harus memiliki induk yang sama pada dokumen HTML.
Misalnya, pilih dan beri gaya setiap elemen p yang terletak tepat setelah elemen div. Selain itu, Anda hanya perlu memilih elemen p yang berada pada level bersarang yang sama elemen div, yaitu mereka harus bertetangga satu sama lain:
Div + p ( warna:merah; )
Teks 1
Teks 2
Teks 3
Elemen1 ~ Elemen2Selector Element1 ~ Element2 dimaksudkan untuk memilih elemen2 yang terletak setelah elemen1, dan mereka bertetangga satu sama lain. Dengan kata lain selector ini digunakan untuk memilih elemen2 yang letaknya setelah elemen1 dan harus memiliki induk yang sama pada dokumen HTML.
Misalnya, pilih dan beri gaya setiap elemen p yang terletak setelah elemen div. Selain itu, Anda hanya perlu memilih elemen p yang berada pada level bersarang yang sama dengan elemen div, mis. mereka harus bertetangga satu sama lain:
Div ~ p ( warna:merah; )
Teks 1
Teks 2
Teks 3-1
Simpan halaman ini untuk menguji contoh di bawah.
Kumpulan elemen yang dipilih dapat digunakan sebagai titik awal untuk berpindah ke node pohon DOM lainnya. Dalam hal ini, pada dasarnya, satu kumpulan elemen digunakan untuk membuat kumpulan elemen lainnya. Bagian berikut menjelaskan dan mendemonstrasikan penggunaan metode jQuery untuk melintasi struktur DOM. Mereka membahas berbagai jenis hubungan yang bisa ada antar elemen yang terkandung dalam dokumen.
Masing-masing metode yang dijelaskan di bagian berikut mengembalikan objek jQuery. Objek ini bisa berisi objek yang cocok, jika ada, atau kosong jika tidak ada (properti panjang objek tersebut mengembalikan nol).
Pindah ke bawah pohon DOMProses bergerak ke bawah struktur hierarki DOM berkaitan dengan pemilihan elemen anak (anak langsung), serta semua elemen lain yang merupakan anak dari elemen yang terdapat dalam objek jQuery. Metode jQuery yang sesuai dan deskripsi singkatnya diberikan pada tabel di bawah ini:
| anak-anak() | Memilih anak-anak dari semua elemen yang terdapat dalam objek jQuery |
| anak-anak (pemilih) | Memilih semua elemen yang cocok dengan pemilih yang ditentukan dan merupakan turunan langsung dari elemen yang terdapat dalam objek jQuery |
| isi() | Mengembalikan elemen anak dan konten teks dari semua elemen yang terdapat dalam objek jQuery |
| menemukan() | Memilih keturunan elemen yang terdapat dalam objek jQuery |
| temukan (pemilih) | Memilih elemen yang cocok dengan pemilih yang ditentukan dan juga merupakan anak dari elemen yang terdapat dalam objek jQuery |
| temukan(jQuery), temukan(HTMLElement), temukan(Elemen HTML) |
Memilih perpotongan himpunan turunan langsung dari elemen yang terdapat dalam objek jQuery dan himpunan elemen yang terdapat dalam objek argumen |
Metode Children() hanya memilih elemen yang merupakan keturunan langsung (anak) dari elemen yang terdapat dalam objek jQuery, dan dapat menggunakan pemilih sebagai argumen opsional untuk menyediakan pemfilteran elemen tambahan. Metode find() dirancang untuk memilih semua turunan, bukan hanya turunan. Metode content() juga mengembalikan konten teks beserta elemen turunannya.
Contoh penggunaan metode kids() dan find() diberikan di bawah ini:
$(function() ( var childCount = $("div.drow").children().each(function(index, elem) ( console.log("Elemen turunan: " + elem.tagName + " " + elem. className); )).length; console.log("Ada " + childCount + " anak-anak"); var descCount = $("div.drow").find("img").each(fungsi(indeks, elemen ) ( console.log("Keturunan: " + elem.tagName + " " + elem.src); )).length; console.log("Ada " + descCount + " img elemen turunan" ;
Dalam contoh ini, metode kids() digunakan tanpa pemilih, sedangkan metode find() digunakan dengan pemilih tunggal. Informasi rinci tentang elemen yang dipilih ditampilkan di konsol bersama dengan indikasi jumlahnya:
Di antara fitur-fitur bagus dari metode kids() dan find() adalah tidak adanya elemen duplikat dalam kumpulan yang dipilih. Hal ini ditegaskan oleh contoh di bawah ini:
$(function() ( $("div.drow").add("div.dcell").find("img").each(function(index, elem) ( console.log("Keturunan: " + elem .tagName + " " + elem.src);
Dalam contoh ini, kita mulai dengan membuat objek jQuery yang berisi semua div dengan kelas drow dan semua div dengan kelas dcell. Poin kuncinya Maksudnya disini semua elemen yang termasuk dalam kelas dcell juga merupakan elemen dari kelas drow. Ini berarti bahwa kita berurusan dengan dua kumpulan elemen turunan yang tumpang tindih, dan jika kita menggunakan find() dengan pemilih img, hal ini dapat mengakibatkan elemen duplikat di kumpulan hasil, karena elemen img adalah turunan dari elemen div dari kedua kelas. Namun, jQuery membantu kami dan menjaga dirinya sendiri untuk memastikan bahwa tidak ada duplikasi di antara elemen yang dikembalikan, yang dikonfirmasi oleh hasil yang ditampilkan di konsol:
Memindahkan pohon DOM melibatkan pencarian orang tua dan nenek moyang elemen yang terkandung dalam objek jQuery. Metode yang digunakan untuk gerakan tersebut diberikan pada tabel di bawah ini:
| terdekat (pemilih), terdekat (pemilih, konteks) | Memilih leluhur terdekat yang cocok dengan pemilih yang ditentukan untuk setiap elemen yang terdapat dalam objek jQuery |
| terdekat(jQuery), terdekat(HTMLElement) | Memilih leluhur terdekat untuk setiap elemen dalam objek jQuery yang cocok dengan salah satu elemen yang terdapat dalam objek argumen |
| offsetParent() | Menemukan leluhur terdekat yang nilai properti posisi CSSnya tetap, absolut, atau relatif |
| induk(), induk(pemilih) | Memilih leluhur langsung untuk setiap elemen dalam objek jQuery, dengan kemampuan untuk memfilternya menggunakan pemilih |
| orang tua(), orang tua(pemilih) | Memilih leluhur untuk setiap elemen dalam objek jQuery, dengan kemampuan untuk memfilternya menggunakan pemilih |
| orang tuaSampai(pemilih), orang tuaSampai(pemilih, pemilih) | Memilih leluhur untuk setiap elemen dalam objek jQuery hingga ditemukan elemen yang cocok dengan pemilih. Hasil dapat disaring menggunakan pemilih kedua |
| ParentsUntil(HTMLElement), ParentsUntil(HTMLElement, pemilih), ParentsUntil(HTMLElement), ParentsUntil(HTMLElement, pemilih) | Memilih leluhur untuk setiap elemen dalam objek jQuery hingga salah satu elemen tertentu ditemukan. Hasil dapat disaring menggunakan pemilih kedua |
Metode parent() memungkinkan Anda memilih elemen induk untuk setiap elemen yang terdapat dalam objek jQuery. Jika pemilih disediakan untuk suatu metode, hanya elemen induk yang cocok dengan pemilih yang akan disertakan dalam kumpulan hasil. Contoh penggunaan metode parent() diberikan di bawah ini:
$(function() ( $("div.dcell").parent().each(function(index, elem) ( console.log("Element: " + elem.tagName + " " + elem.id); ) ); $("div.dcell").parent("#row1").each(function(index, elem) ( console.log("Elemen yang difilter: " + elem.tagName + " " + elem.id); ));
Skrip ini pertama-tama memilih semua div milik kelas dcell dan kemudian memanggil metode parent() untuk memilih semua elemen induk. Ini juga menunjukkan penggunaan metode parent() dengan pemilih. Detail tentang setiap elemen induk yang dipilih dicetak ke konsol menggunakan metode masing-masing:
Metode Parents() (perhatikan huruf s terakhir pada namanya) menyediakan kemampuan untuk memilih semua, bukan hanya nenek moyang langsung (orang tua) dari elemen yang terdapat dalam objek jQuery. Seperti pada kasus sebelumnya, metode ini dapat menggunakan pemilih sebagai argumen untuk memfilter hasil.
Contoh penggunaan metode parent() diberikan di bawah ini:
$(function() ( $("img, img").parents().each(function(index, elem) ( console.log("Element: " + elem.tagName + " " + elem.className + " " + elemen.id);
Contoh ini menggunakan metode Parents() untuk memilih nenek moyang dari dua elemen img yang telah dipilih sebelumnya. Informasi tentang masing-masing leluhur dikeluarkan ke konsol:
Metode ParentsUntil() adalah jenis metode lain yang dirancang untuk memilih nenek moyang elemen. Untuk setiap elemen yang terdapat dalam objek jQuery, metode ParentsUntil() naik ke hierarki DOM, memilih elemen leluhur hingga menemukan elemen yang cocok dengan pemilih. Contoh penggunaan metode ini diberikan di bawah ini:
$(fungsi() ( $("img, img") .parentsUntil("formulir").each(fungsi(indeks, elem) ( console.log("Elemen: " + elem.tagName + " " + elem.className + " " + elem.id); )); ));
Dalam contoh ini, proses pemilihan leluhur untuk setiap elemen berlanjut hingga elemen bentuk ditemukan. Hasil berikut ditampilkan di konsol:
Perhatikan bahwa elemen yang cocok dengan pemilih dikecualikan dari leluhur yang dipilih. Dalam hal ini, itu berarti mengecualikan elemen form. Kumpulan leluhur dapat difilter lebih lanjut dengan menyediakan metode paraentsUntil() dengan pemilih sebagai argumen kedua, seperti yang ditunjukkan pada contoh di bawah ini:
$(fungsi() ( $("img, img").parentsUntil("form", ":tidak(.dcell)") .each(function(index, elem) ( console.log("Element: " + elem.tagName + " " + elem.className + " " + elem.id); )); ));
Contoh ini menambahkan pemilih yang memfilter elemen milik kelas dcell. Hasil berikut ditampilkan di konsol:
Metode terdekat() memungkinkan Anda memilih leluhur pertama yang cocok dengan pemilih untuk setiap elemen dalam objek jQuery. Contoh penggunaan metode ini diberikan di bawah ini:
$(function() ( $("img").closest(".drow").each(function(index, elem) ( console.log("Element: " + elem.tagName + " " + elem.className + " " + elem.id); var konteksElem = dokumen.getElementById("baris1"); $("img").closest(".drow", konteksElem).each(fungsi(indeks, elemen) ( konsol .log( "Elemen konteks: " + elem.tagName + " " + elem.className + " " + elem.id ));
Dalam contoh ini, pertama-tama kita memilih elemen img dalam dokumen dan kemudian mencari leluhur terdekat untuk masing-masing elemen, yang termasuk dalam kelas drow, menggunakan metode terdekat().
Anda dapat mempersempit cakupan pilihan leluhur Anda dengan meneruskan metode terdekat() dan objek HTMLElement() sebagai argumen kedua. Nenek moyang yang bukan merupakan objek konteks atau keturunannya tidak termasuk dalam kumpulan yang dipilih. Hasil berikut ditampilkan di konsol:
Metode terdekat() juga dapat meneruskan objek jQuery, objek HTMLElement, atau array objek HTMLElement sebagai argumen. Dalam hal ini, metode terdekat() akan melanjutkan proses pemilihan leluhur untuk setiap elemen yang terdapat dalam objek jQuery asli hingga menemukan objek yang diteruskan sebagai argumen.
Metode offsetParent() adalah variasi dari metode terdekat() dan dirancang untuk menemukan anak pertama yang nilai properti posisi CSSnya relatif, absolut, atau tetap. Elemen-elemen ini disebut nenek moyang yang diposisikan, dan menemukannya dapat berguna saat bekerja dengan animasi. Contoh penggunaan metode ini diberikan di bawah ini:
#baris1 (posisi: tetap; atas: 75px; kiri: 50px) #baris2 (posisi: tetap; atas: 150px; kiri: 50px) $(function() ( $("img").offsetParent().css(" warna latar belakang", "abu-abu muda"); ));
Dalam versi dokumen ini, pertama dengan menggunakan CSS nilai properti posisi elemen dengan atribut id diatur ke baris1 dan baris2. Selanjutnya, salah satu elemen img dipilih dalam dokumen dan posisi anak terdekat dari elemen yang dipilih ditemukan menggunakan metode offsetParent(). Setelah ini, gunakan metode css() properti warna latar belakang dari elemen yang dipilih disetel ke abu-abu terang. Halaman yang dihasilkan di jendela browser ditunjukkan pada gambar:
Jenis pergerakan terakhir di sepanjang pohon DOM yang perlu kita pertimbangkan adalah pergerakan antar node pada tingkat hierarki yang sama (antara node saudara). Deskripsi singkat Metode jQuery yang dimaksudkan untuk ini tercantum dalam tabel di bawah ini:
| selanjutnya(), selanjutnya(pemilih) | Memilih elemen saudara segera setelah setiap elemen yang terdapat dalam objek jQuery. Tersedia peluang tambahan memfilter hasil menggunakan pemilih |
| nextAll(), nextAll(pemilih) | Memilih semua elemen saudara berikutnya untuk setiap elemen yang terdapat dalam objek jQuery. Ada opsi tambahan untuk memfilter hasil menggunakan pemilih |
| nextUntil(selector), nextUntil(selector, selector), nextUntil(jQuery), nextUntil(jQuery, selector), nextUntil(HTMLElement), nextUntil(HTMLElement, selector) | Untuk setiap elemen, pilih elemen saudara berikutnya hingga (tetapi tidak termasuk) elemen yang cocok dengan pemilih atau terdapat dalam objek jQuery atau array HTMLElement. Ada opsi tambahan untuk memfilter hasil menggunakan pemilih |
| sebelumnya(), sebelumnya(pemilih) | Memilih elemen saudara tepat sebelum setiap elemen yang terdapat dalam objek jQuery. Ada opsi tambahan untuk memfilter hasil menggunakan pemilih |
| prevAll(), prevAll(pemilih) | Memilih semua elemen saudara sebelumnya untuk setiap elemen yang terdapat dalam objek jQuery. Terdapat opsi tambahan untuk memfilter hasil menggunakan pemilih yang diteruskan ke metode sebagai argumen kedua |
| prevUntil(selector), prevUntil(selector, selector), prevUntil(jQuery), prevUntil(jQuery, selector), prevUntil(HTMLElement), prevUntil(HTMLElement, selector) | Untuk setiap elemen, pilih elemen saudara sebelumnya hingga (tetapi tidak termasuk) elemen yang cocok dengan pemilih atau terdapat dalam objek jQuery atau array HTMLElement. Terdapat opsi tambahan untuk memfilter hasil menggunakan pemilih yang diteruskan ke metode sebagai argumen kedua |
| saudara kandung(), saudara kandung(pemilih) | Memilih semua elemen saudara untuk setiap elemen yang terdapat dalam objek jQuery. Ada opsi tambahan untuk memfilter hasil menggunakan pemilih |
Metode saudara() menyediakan kemampuan untuk memilih semua elemen saudara dari semua elemen yang terdapat dalam objek jQuery. Contoh penggunaan metode ini diberikan di bawah ini.