Cara menggunakan hapus javascript html yang berdekatan

Kami telah membuat panduan lengkap untuk membantu Anda mempelajari CSS, apakah Anda baru memulai dengan dasar-dasarnya atau ingin menjelajahi CSS lebih lanjut

Pemilih CSS

Jadi, Anda mempelajari dasar _______0_______13, _______0_______14, dan _______0_______15 penyeleksi—dan kemudian membatalkannya sehari? . Anda berutang pada diri sendiri untuk mengkomit pemilih CSS dan CSS3 lanjutan ini ke memori

Lompat ke pemilih CSS tertentu dari daftar

+ Tampilkan lebih banyak

Pemilih Dasar

1.  

3

16

1

* {

2

 margin: 0;

3

 padding: 0;

4

}

Mari kita hancurkan yang sudah jelas, untuk pemula, sebelum kita beralih ke penyeleksi yang lebih mahir

Simbol bintang akan menargetkan setiap elemen di halaman. Banyak pengembang akan menggunakan trik ini untuk menghilangkan

3

3

1

#container * {

2

* {

3

}

Ini akan menargetkan setiap elemen yang merupakan anak dari

3

2.  

3

22

1

* {

2

* {

3

* {

4

}

Awalan simbol hash ke pemilih memungkinkan kita untuk menargetkan oleh _______0_______13. Ini adalah penggunaan yang paling umum;

Bertanya pada diri sendiri. apakah saya benar-benar perlu menerapkan _______0_______13 ke elemen ini untuk menargetkannya?

3

3.  

3

27

1

2

2

2

3

}

Ini adalah pemilih _______0________14. Perbedaan antara _______0________13s dan _______0_______14es adalah, dengan yang terakhir, Anda dapat menargetkan banyak elemen. Gunakan _______0________14es saat Anda ingin gaya Anda diterapkan ke sekelompok elemen. Sebagai alternatif, gunakan _______0________13s untuk menemukan jarum di tumpukan jerami, dan beri gaya hanya pada elemen spesifik itu

4.  ________0______33

1

2

2

 margin: 0;

Bagaimana jika Anda ingin menargetkan semua elemen pada halaman, menurut _______0_______34 mereka, bukan nama _______0_______13 atau _______0_______14? . Jika Anda perlu menargetkan semua daftar yang tidak diurutkan, gunakan

3

Demo Langsung dari Pemilih Dasar

Pemilih Kombinasi

5.  ________0______38

1

 margin: 0;

2

 margin: 0;

3

}

Pemilih paling umum berikutnya adalah

3

Kiat pro. Jika pemilih Anda terlihat seperti _______0________40, Anda salah melakukannya. Selalu tanyakan pada diri Anda apakah benar-benar perlu menerapkan semua beban itu

6.  ________0______41

1

 margin: 0;

2

3

3

}

Ini disebut sebagai pemilih yang berdekatan. Ini hanya akan memilih elemen yang langsung didahului oleh elemen sebelumnya. Dalam hal ini, hanya paragraf pertama setelah setiap _______0_______42 yang akan memiliki teks merah

7.  ________0______43

1

3

2

3

3

}

Perbedaan antara _______0_______38 standar dan _______0_______43 adalah bahwa yang terakhir hanya akan memilih anak langsung. Misalnya, pertimbangkan markup berikut

1

 padding: 0;

2

 padding: 0;

3

4

 padding: 0;

Pemilih _______0________46 hanya akan menargetkan _______0_______42 yang merupakan turunan langsung dari _______0_______21 dengan _______0_______13 dari _______0_______50. Ini tidak akan menargetkan, misalnya, _______0_______42 yang merupakan anak dari _______0_______52 pertama

Untuk alasan ini, ada manfaat kinerja dalam menggunakan penggabung anak. Bahkan, ini direkomendasikan terutama saat bekerja dengan mesin pemilih CSS berbasis JavaScript

8.  

3

53

1

}

2

3

3

}

Penggabung saudara ini mirip dengan

3

3

3

3

Demo Langsung Pemilih Penggabung

Pemilih Atribut

9.  

3

58

1

1

2

1

3

}

Disebut sebagai pemilih atribut, dalam contoh kami di atas, ini hanya akan memilih tag jangkar yang memiliki atribut

3

10.  ________0______60

1

1

2

1

3

}

Cuplikan di atas akan menata semua tag jangkar yang tertaut ke https. // kode. tutsplus. com; . Semua tag jangkar lainnya tidak akan terpengaruh

Perhatikan bahwa kami membungkus nilai dalam tanda kutip. Ingat juga untuk melakukan ini saat menggunakan mesin pemilih JavaScript CSS. Jika memungkinkan, selalu gunakan pemilih CSS3 daripada metode tidak resmi

Ini bekerja dengan baik, meskipun agak kaku. Bagaimana jika tautannya memang mengarah ke Envato Tuts+, tetapi mungkin jalurnya adalah kode. tutsplus. com daripada URL lengkap?

11.  ________0______61

1

#container * {

2

1

3

}

Ini dia; . Bintang menunjukkan bahwa nilai yang melanjutkan harus muncul di suatu tempat dalam nilai atribut. Dengan begitu, ini mencakup tutsplus. com, kode. tutsplus. com, dan bahkan desain web. tutsplus. com

Perlu diingat bahwa ini adalah pernyataan yang luas. Bagaimana jika tag jangkar ditautkan ke beberapa situs non-Envato dengan string tutsplus di URL?

12.  ________0______64

1

#container * {

2

* {

3

* {

4

}

Pernah bertanya-tanya bagaimana beberapa situs web dapat menampilkan ikon kecil di sebelah tautan eksternal?

Ini adalah menang dengan simbol karat. Ini paling sering digunakan dalam ekspresi reguler untuk menunjukkan awal dari sebuah string. Jika kita ingin menargetkan semua tag jangkar yang memiliki

3

3

Perhatikan bahwa kita tidak mencari _______0_______67;

Sekarang, bagaimana jika kita ingin memberi gaya pada semua jangkar yang tertaut ke, katakanlah, foto?

13.  ________0______69

1

* {

2

3

3

}

Sekali lagi, kami menggunakan simbol ekspresi reguler, _______0_______63, untuk merujuk ke akhir string. Dalam hal ini, kami mencari semua jangkar yang tertaut ke gambar—atau setidaknya URL yang diakhiri dengan _______0_______71. Perlu diingat bahwa ini tidak akan menangkap gambar GIF dan PNG

14.  ________0______72

1

* {

2

3

3

}

Bagaimana kami mengkompensasi semua jenis gambar yang beragam?

1

* {

2

* {

3

* {

4

* {

 padding: 0;

3

4

}

Tapi itu menyakitkan, dan itu tidak efisien. Solusi lain yang mungkin adalah dengan menggunakan atribut khusus. Bagaimana jika kita menambahkan atribut _______0________73 kita sendiri ke setiap jangkar yang tertaut ke gambar?

1

* {

Kemudian, dengan pengait itu terpasang, kita dapat menggunakan pemilih atribut standar untuk hanya menargetkan jangkar tersebut

1

* {

2

3

3

}

15.  ________0______74

1

* {

2

3

3

}

4

 padding: 0;

* {

4

* {

4

}

Inilah yang spesial yang akan mengesankan teman-teman Anda. Tidak banyak orang yang tahu tentang trik ini. Simbol tilde (

3

Mengikuti atribut khusus kami dari nomor 15 di atas, kami dapat membuat atribut _______0_______76, yang dapat menerima daftar yang dipisahkan spasi dari apa pun yang perlu kami catat. Dalam hal ini, kami akan mencatat tautan eksternal dan tautan ke gambar—sebagai contoh saja

1

* {

Dengan adanya markup tersebut, sekarang kita dapat menargetkan tag apa pun yang memiliki salah satu dari nilai tersebut, dengan menggunakan trik pemilih atribut _______0_______75

1

* {

2

* {

3

3

4

}

 padding: 0;

4

* {

4

* {

Cukup bagus, ya?

Demo Langsung Pemilih Atribut

Pemilih Pseudo

16. 378 dan 379

1

* {

2

* {

Kami menggunakan pseudo-class _______0________80 untuk menargetkan semua tag jangkar yang belum diklik

Atau, kami juga memiliki kelas semu _______0________81, yang, seperti yang Anda harapkan, memungkinkan kami untuk menerapkan gaya tertentu hanya pada tag jangkar pada halaman yang telah diklik, atau "dikunjungi"

17.  

3

82

1

* {

2

* {

3

}

Kelas semu ini hanya akan menargetkan elemen antarmuka pengguna yang telah dicentang—seperti tombol radio atau kotak centang. Sesederhana itu

18.  ________0______83

Kelas semu _______0______84 dan _______0_______85 sangat bagus. Setiap hari, tampaknya, orang menemukan cara baru dan kreatif untuk menggunakannya secara efektif. Mereka hanya menghasilkan konten di sekitar elemen yang dipilih

Banyak yang pertama kali diperkenalkan ke kelas-kelas ini ketika mereka menemukan peretasan perbaikan yang jelas

1

* {

2

* {

3

* {

4

* {

 padding: 0;

* {

4

* {

4

* {

4

* {

4

4

* {

}

2

}

2

2

}

Peretasan ini menggunakan kelas semu _______0________86 untuk menambahkan spasi setelah elemen, lalu menghapusnya. Ini adalah trik yang bagus untuk dimiliki di tas perkakas Anda, terutama dalam kasus ketika metode _______0_______87 tidak memungkinkan

Untuk penggunaan kreatif lainnya dari ini, lihat tip cepat saya untuk membuat bayangan

Menurut spesifikasi Pemilih CSS3, Anda harus secara teknis menggunakan sintaks elemen semu dua titik dua _______0_______88. Namun, agar tetap kompatibel, agen pengguna juga akan menerima penggunaan titik dua tunggal.  

19.  

3

89

1

2

2

2

3

}

Oh ayolah. Anda tahu yang ini. Istilah resmi untuk ini adalah "kelas semu tindakan pengguna". Kedengarannya membingungkan, tetapi sebenarnya tidak. Ingin menerapkan gaya tertentu saat pengguna mengarahkan kursor ke suatu elemen?

Perlu diingat bahwa versi Internet Explorer yang lebih lama tidak merespons ketika kelas semu _______0_______90 diterapkan pada apa pun selain tag jangkar

Anda akan paling sering menggunakan pemilih ini saat menerapkan, misalnya, _______0_______91 ke tag jangkar, saat diarahkan ke atas

1

2

2

2

3

}

Kiat pro.

3

_92 terlihat lebih baik dari

3

93

20.  

3

94

1

2

2

2

3

}

Kelas semu negasi sangat membantu. Katakanlah saya ingin memilih semua _______0________21, kecuali yang memiliki id _______0_______50. Cuplikan di atas akan menangani tugas itu dengan sempurna

Atau, jika saya ingin memilih setiap elemen (tidak disarankan) kecuali untuk tag paragraf, kami dapat melakukannya

1

2

2

2

3

}

21.  

3

97

1

2

2

2

3

2

4

}

Kita dapat menggunakan elemen semu (ditunjuk oleh

3

Elemen semu terdiri dari dua titik dua.

3

_88

Targetkan Huruf Pertama Paragraf

1

2

2

2

3

2

4

2

 padding: 0;

2

4

2

}

Cuplikan ini adalah abstraksi yang akan menemukan semua paragraf di halaman, lalu mensub-targetkan hanya huruf pertama dari elemen tersebut

Ini paling sering digunakan untuk membuat gaya seperti koran untuk huruf pertama artikel

Menargetkan Baris Pertama Paragraf

1

2

2

2

3

2

4

}

Demikian pula, elemen semu _______9________00 akan, seperti yang diharapkan, memberi gaya hanya pada baris pertama elemen

"Untuk kompatibilitas dengan style sheet yang ada, agen pengguna juga harus menerima notasi satu titik dua sebelumnya untuk elemen semu yang diperkenalkan di CSS level 1 dan 2 (yaitu, _______9_______01, _______9_______02, _______9_______03 dan _______0_______86). Kompatibilitas ini tidak diperbolehkan untuk pseudo-elemen baru yang diperkenalkan dalam spesifikasi ini. "—Spesifikasi Pemilih W3C

Demo Langsung Pemilih Pseudo

Nth Child dan Type Selectors

22.   padding: 0; 05

1

2

2

3

3

}

Ingat hari-hari ketika kita tidak memiliki cara untuk menargetkan elemen tertentu dalam tumpukan?

Harap perhatikan bahwa _______9________06 menerima bilangan bulat sebagai parameter, tetapi ini bukan berbasis nol. Jika Anda ingin menargetkan item daftar kedua, gunakan

 padding: 0;

Kami bahkan dapat menggunakan ini untuk memilih kumpulan variabel anak-anak. Misalnya, kita dapat melakukan _______9________09 untuk memilih setiap item daftar keempat

23.   padding: 0; 10

1

2

2

3

3

}

Bagaimana jika Anda memiliki daftar item yang sangat banyak di _______0_______42, dan Anda hanya perlu mengakses, katakanlah, item ketiga hingga terakhir?

Teknik ini bekerja hampir identik dengan nomor 16 di atas. Perbedaannya adalah bahwa itu dimulai pada akhir koleksi, dan berjalan kembali

24.  ________9______14

1

2

2

* {

3

}

Akan ada saatnya, daripada memilih

 padding: 0;

Bayangkan markup yang berisi lima daftar tidak berurutan. Jika Anda hanya ingin menata _______0________42 ketiga, dan tidak memiliki _______0_______13 unik untuk dihubungkan, Anda dapat menggunakan kelas semu _______9_______19. Dalam cuplikan di atas, hanya _______0_______42 ketiga yang memiliki batas di sekelilingnya

25.  ________9______21

1

2

2

* {

3

}

Dan ya, untuk tetap konsisten, kita juga dapat menggunakan _______9_______22 untuk memulai di akhir daftar pemilih dan bekerja kembali untuk menargetkan elemen yang diinginkan

26.   padding: 0; 23

1

2

2

2

3

}

Kelas semu struktural ini memungkinkan kita untuk hanya menargetkan anak pertama dari induk elemen. Anda akan sering menggunakan ini untuk menghapus batas dari item daftar pertama dan terakhir

Misalnya, katakanlah Anda memiliki daftar baris, dan masing-masing memiliki _______9_______24 dan _______0_______91. Nah, dengan susunan itu, item pertama dan terakhir di set itu akan terlihat sedikit janggal

Banyak desainer menerapkan kelas _______9________26 dan _______9_______27 untuk mengkompensasi hal ini. Sebagai gantinya, Anda dapat menggunakan kelas semu ini

27.  ________9______28

1

2

2

1

3

}

Kebalikan dari _______9________29, _______9_______30 akan menargetkan item terakhir dari induk elemen

 padding: 0;

_30 Contoh Pemilih

Mari buat contoh sederhana untuk mendemonstrasikan satu kemungkinan penggunaan kelas-kelas ini. Kami akan membuat daftar item bergaya

1

2

2

2

3

2

4

2

 padding: 0;

 margin: 0;

Untuk markup, tidak ada yang istimewa. hanya daftar sederhana

Berikut CSSnya

1

 margin: 0;

2

 margin: 0;

3

 margin: 0;

4

 margin: 0;

 padding: 0;

 margin: 0;

4

 margin: 0;

4

}

4

4

 margin: 0;

4

 margin: 0;

}

2

}

 margin: 0;

2

}

Penataan gaya ini akan menyetel latar belakang, menghapus padding default browser pada _______0_______42, dan menerapkan batas ke setiap _______0_______52 untuk memberikan sedikit kedalaman

Untuk menambahkan kedalaman pada daftar Anda, terapkan _______0________91 untuk setiap _______0_______52 yang satu atau dua tingkat lebih gelap dari warna latar belakang _______0_______52. Selanjutnya, aplikasikan _______9________24 yang sedikit lebih terang

Satu-satunya masalah, seperti yang ditunjukkan pada gambar di atas, adalah perbatasan akan diterapkan ke bagian paling atas dan bawah dari daftar yang tidak diurutkan—yang terlihat aneh. Mari gunakan kelas semu _______9________38 dan _______9______39 untuk memperbaikinya

1

 margin: 0;

2

 margin: 0;

3

}

4

 padding: 0;

 margin: 0;

4

 margin: 0;

4

}

Ini dia;

28.  ________9______40

1

 margin: 0;

2

3

3

}

Sejujurnya, Anda mungkin tidak akan terlalu sering menggunakan kelas pseudo

 padding: 0;

Ini memungkinkan Anda untuk menargetkan elemen yang merupakan satu-satunya anak dari induknya. Misalnya, mengacu pada cuplikan di atas, hanya paragraf yang merupakan anak tunggal dari

3

Mari kita asumsikan markup berikut

1

 margin: 0;

2

3

 margin: 0;

4

 margin: 0;

 padding: 0;

 margin: 0;

4

 margin: 0;

Dalam hal ini, paragraf kedua _______0________21 tidak akan ditargetkan; . Segera setelah Anda menerapkan lebih dari satu turunan ke suatu elemen, kelas semu

 padding: 0;

29.  ________9______46

1

 margin: 0;

2

2

3

}

Kelas semu struktural ini dapat digunakan dalam beberapa cara cerdas. Ini akan menargetkan elemen yang tidak memiliki saudara kandung di dalam wadah induknya. Sebagai contoh, mari targetkan semua

3

Pertama, tanyakan pada diri Anda bagaimana Anda akan menyelesaikan tugas ini. Anda dapat melakukan

 padding: 0;

 padding: 0;

1

 margin: 0;

2

2

3

}

30.  ________9______50

Kelas semu ________9______51 memungkinkan Anda untuk memilih saudara kandung pertama dari jenisnya

Sebuah tes

Untuk lebih memahami ini, mari kita lakukan tes. Salin markup berikut ke editor kode Anda

1

 margin: 0;

2

 margin: 0;

3

 margin: 0;

4

 margin: 0;

 padding: 0;

 margin: 0;

4

 margin: 0;

4

4

 margin: 0;

4

 margin: 0;

4

 margin: 0;

}

}

Sekarang, tanpa membaca lebih lanjut, coba cari cara untuk menargetkan hanya "Item Daftar 2". Ketika Anda sudah mengetahuinya (atau menyerah), baca terus

Solusi 1

Ada berbagai cara untuk menyelesaikan tes ini. Kami akan meninjau beberapa dari mereka. Mari kita mulai dengan menggunakan

 padding: 0;

1

 margin: 0;

2

2

3

}

Cuplikan ini pada dasarnya mengatakan, untuk menemukan daftar pertama yang tidak diurutkan pada halaman, kemudian temukan hanya turunan langsung, yang merupakan item daftar. Selanjutnya, saring ke bawah hanya item daftar kedua di set itu

Solusi 2

Pilihan lain adalah menggunakan pemilih yang berdekatan

1

3

2

2

3

}

Dalam skenario ini, kami menemukan _______0________42 yang langsung melanjutkan tag _______0_______56, lalu menemukan anak terakhir dari elemen tersebut

Solusi 3

Kita bisa menjadi menjengkelkan atau menyenangkan seperti yang kita inginkan dengan penyeleksi ini

1

3

2

3

3

}

Kali ini, kami mengambil _______0________42 pertama di halaman, lalu menemukan item daftar pertama, tetapi mulai dari bawah.  

Demo Langsung Anak Ke-N dan Pemilih Jenis

Kesimpulan

Jika Anda memberikan kompensasi untuk browser lama, seperti Internet Explorer 6, Anda tetap harus berhati-hati saat menggunakan pemilih yang lebih baru ini. Tapi tolong jangan biarkan hal itu menghalangi Anda untuk mempelajari ini. Anda akan merugikan diri sendiri. Pastikan untuk merujuk di sini untuk daftar kompatibilitas browser. Atau, Anda dapat menggunakan IE9 Dean Edward yang luar biasa. skrip js untuk membawa dukungan bagi pemilih ini ke browser lama

Kedua, saat bekerja dengan pustaka JavaScript, seperti jQuery yang populer, selalu coba gunakan pemilih CSS3 asli ini di atas metode/pemilih khusus pustaka, jika memungkinkan. Ini akan membuat kode Anda lebih cepat, karena mesin pemilih dapat menggunakan parsing asli browser, bukan miliknya sendiri

Sangat menyenangkan bahwa Anda menghabiskan waktu untuk mempelajari dasar-dasar desain web, tetapi jika Anda membutuhkan solusi cepat, salah satu template CSS siap pakai kami mungkin merupakan pilihan yang baik. Kami juga memiliki beberapa item CSS premium untuk Anda pertimbangkan