Dapatkah beberapa elemen memiliki javascript id yang sama?

Sejauh ini Anda telah menambahkan gaya ke berbagai elemen di halaman portofolio Anda, namun gaya yang Anda tambahkan telah memengaruhi semua elemen dari jenis tertentu. Misalnya, saat Anda menambahkan gaya ke elemen div yang memengaruhi semua elemen div secara merata. Bagaimana jika Anda ingin mengubah gaya beberapa elemen div dengan satu cara, dan elemen div lainnya dengan cara yang berbeda? . Dalam pelajaran ini Anda akan mempelajari bagaimana atribut ID dan Kelas dapat digunakan untuk menyesuaikan gaya elemen individu (id) atau kelompok elemen (kelas)

Hasil Pelajar

Pada penyelesaian latihan ini

• Anda akan dapat mengidentifikasi bagaimana atribut ID digunakan dalam CSS untuk mengaktifkan gaya elemen individual
• Anda akan dapat mengidentifikasi bagaimana atribut Kelas digunakan dalam CSS untuk mengaktifkan gaya grup elemen
• Anda akan menambahkan atribut ID dan Kelas ke elemen tertentu dalam halaman web

Apa itu id?

Dalam HTML, setiap elemen di halaman web Anda dapat diberi atribut id yang unik. Ini dapat berupa teks apa pun yang Anda suka, tetapi harus unik (hanya satu item yang dapat memiliki label ini). Merupakan praktik yang baik untuk menetapkan label yang menjelaskan fungsi elemen. Misalnya, a

yang digunakan untuk menandai menu navigasi mungkin memiliki id="navigation" atau id="menu"

Anda menetapkan atribut id ke elemen HTML saat

1. Anda ingin mengatur gaya elemen itu secara berbeda dari elemen lain dari jenis yang sama
2. Anda ingin dapat menautkan ke elemen tertentu dalam halaman web. Faktanya, Anda telah menambahkan id="main" ke salah satu elemen div pada halaman portofolio Anda saat Anda membuat tautan "lewati ke konten utama" dalam pelajaran tentang Jenis Tautan Khusus
3. Anda ingin dapat langsung mengakses elemen tersebut menggunakan Javascript. Anda akan mempelajari lebih lanjut tentang itu dalam modul di Javascript

Di unit ini, kami hanya tertarik pada alasan pertama untuk menambahkan ID. Kami ingin dapat mengatur gaya elemen tertentu menggunakan CSS. Misalnya, Anda memiliki paragraf yang berfungsi sebagai peringatan di halaman. Anda tidak ingin terlihat seperti semua paragraf lain di halaman. Anda ingin menonjol sehingga orang pasti akan menyadarinya. Anda dapat menambahkan id="alert" ke paragraf tersebut, seperti ini

  
Important! All classes are cancelled today.

Untuk menambahkan gaya ke elemen dengan id, Anda mengawali id ​​dengan simbol # di CSS Anda. Misalnya, inilah cara membuat paragraf peringatan muncul dalam kotak kuning besar dengan batas hitam dan teks hitam besar

  p#alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

_

Perhatikan bahwa menentukan tipe elemen dalam CSS bersifat opsional jika elemen memiliki id. Pada contoh di atas, kami menggunakan "p#alert" sebagai pemilih, yang memberi tahu browser bahwa gaya berikut berlaku untuk paragraf dengan id "alert". Namun, karena tidak ada elemen lain - paragraf atau lainnya - yang memiliki id yang sama, kita dapat dengan mudah menggunakan "#alert" sebagai pemilih kita, tanpa "p", seperti ini

  #alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

Ini umumnya merupakan praktik yang baik untuk memasukkan elemen karena ini membantu Anda mengingat elemen mana yang memiliki id tertentu. Terkadang Anda ingin mengetahuinya hanya dengan melihat file CSS, tanpa harus merujuk kembali ke file HTML asli

Apa itu kelas?

Terkadang mungkin ada sekelompok elemen yang ingin Anda sesuaikan gaya dengan cara tertentu. Misalnya, Anda membuat laman web hiburan yang menyertakan beberapa ulasan film, selain konten lainnya. Keseluruhan isi dari setiap review (sebuah heading dengan judul film, ditambah beberapa paragraf) dikemas dalam a

untuk menyimpan semuanya dalam satu kotak. Paragraf pertama dari setiap ulasan adalah ringkasan singkat yang menggambarkan film tersebut, kemudian semua paragraf yang tersisa berisi konten kritik Anda terhadap film tersebut. Anda mungkin ingin mengatur gaya

elemen yang berisi setiap ulasan berbeda dari yang lain

elemen di halaman, jadi semua ulasan memiliki tampilan yang berbeda, tetapi konsisten satu sama lain. Anda dapat melakukannya dengan menugaskan class="review" ke setiap ulasan ini. Selain itu, Anda mungkin ingin paragraf ringkasan memiliki tampilan yang khas, berbeda dari semua paragraf lainnya. Anda dapat melakukannya dengan menugaskan class="summary" ke setiap paragraf ringkasan. Kode Anda mungkin terlihat seperti ini.

  

    
The Godfather
    
The Godfather (1972) is the greatest movie of all time,
      according to numerous surveys of movie critics and audiences alike.
    
The Godfather is.. (your review here)
  

  

    
Avatar
    
Avatar (2009) is the highest grossing film of all time,
      earning approximately $2.8 billion.
    
Avatar is.. (your review here)




  

Untuk menambahkan gaya ke semua elemen yang merupakan bagian dari kelas tertentu, Anda mengawali nama kelas dengan tanda titik (. ) di CSS Anda. Misalnya, inilah cara kami dapat menambahkan latar belakang biru pucat dan bingkai biru tua ke semua ulasan film, dan menambahkan huruf miring ke semua paragraf ringkasan

  div.review {
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
  p.summary {
  	font-style: italic;
  }

_

Pemilih Keturunan

Selain menetapkan gaya ke kelas elemen, Anda juga dapat menetapkan gaya ke keturunan elemen tersebut. Keturunan adalah elemen yang bersarang di dalam elemen lain

Sebagai contoh, katakanlah Anda ingin semua elemen (tautan) pada halaman berwarna merah dan bergaris bawah. Inilah cara Anda dapat melakukannya di CSS

  a {
	  color: red;
	  text-decoration: underline;
  }

Namun, katakanlah Anda menginginkan gaya yang berbeda untuk tautan yang merupakan bagian dari menu navigasi Anda. Anda ingin mereka menjadi teks putih dengan latar belakang biru tua, tanpa garis bawah. Dengan asumsi tautan ini terkandung dalam a

elemen, Anda bisa mengatur gaya yang menggunakan penyeleksi keturunan di CSS, seperti itu.

  nav a {
	  color: white;
	  background-color: #003399; /* dark blue */
	  text-decoration: none;
  }

_

Pada contoh di atas, nav pemilih memberi tahu browser untuk menerapkan definisi gaya ke setiap elemen yang ada di dalam a

elemen. Dengan kata lain, jika ada tautan di dalam menu navigasi, terapkan gaya ini ke sana

Dalam contoh ulasan film, misalkan sebagian besar paragraf di halaman hiburan Anda memiliki padding yang disetel ke 1em. Namun, Anda ingin mengurangi bantalan itu menjadi 0. 75em untuk semua paragraf yang membentuk ulasan film, agar ulasan terlihat sedikit lebih ketat. Karena ulasan film masing-masing terbungkus dalam a

elemen dengan class="review", Anda dapat dengan mudah mengubah gaya semuanya menggunakan penyeleksi turunan, seperti ini.

  div.review p {
	  padding: 0.75em;
  }

Kegiatan

1. Buka indeks portofolio Anda. html dengan editor teks Anda
2. Tinjau konten halaman Anda. Itu harus mengandung satu atau lebih elemen berikut
   • Perhatikan berapa banyak

     elemen yang ada. Masing-masing saat ini memiliki gaya yang sama. Manakah dari berikut ini yang ingin Anda gaya berbeda?

     • Div pertama adalah wadah untuk tautan lewati ke konten utama
     • Div kedua adalah wadah untuk informasi kontak Anda
     • Div ketiga adalah wadah untuk informasi tentang kursus dan sekolah Anda
     Div kedua dan ketiga serupa fungsinya, tetapi yang pertama sangat berbeda

   • Div pertama unik. Ini secara fungsional berbeda dari semua div lainnya dan Anda mungkin menginginkannya ditata secara berbeda. Oleh karena itu, is harus memiliki id yang unik. Tetapkan id="skipnav" ke div pertama. CATATAN. Div ini juga muncul di halaman lain dalam portofolio Anda, jadi Anda harus membuka setiap file HTML lainnya dan menambahkan atribut id yang sama di sana
   • Karena div kedua dan ketiga mirip satu sama lain, mereka dapat diberi kelas. Kemudian, gaya apa pun yang Anda terapkan pada kelas tersebut akan diterapkan pada kedua div ini. Karena keduanya berisi info tentang sesuatu, tambahkan atribut class="info" ke masing-masing div ini
   • Sekarang lihat paragraf di dalam elemen. Harus ada paragraf ikhtisar di bagian atas. Tambahkan id="overview" ke paragraf ini agar dapat diberi gaya berbeda dari paragraf lainnya
   • Saat ini, Anda memiliki beberapa paragraf yang berisi konten placeholder seperti "Bagian ini akan segera selesai. " Untuk setiap paragraf ini, tambahkan class="temp". Ini akan memungkinkan konten placeholder ditata secara berbeda dari konten yang sudah selesai. Saat Anda menambahkan konten ke bagian ini di masa mendatang, Anda harus ingat untuk menghapus kelas tersebut

Selebaran/Dokumen Online

Semua selesai?

Setelah Anda menambahkan elemen id dan kelas ke masing-masing div di halaman beranda portofolio Anda, Anda sekarang memiliki kerangka kerja untuk menambahkan lebih banyak variasi pada gaya di halaman Anda. Tunjukkan halaman Anda kepada instruktur Anda sebelum melanjutkan ke Pelajaran 2

Apa yang terjadi jika kita memberikan dua elemen ID yang sama?

Seperti namanya, ID adalah pengenal untuk elemen di seluruh dokumen. Jadi tidak ada dua elemen dalam dokumen yang memiliki id yang sama. Jika kami mencoba memberikan id yang sama ke dua elemen berbeda dalam dokumen, kami akan mendapat peringatan . Id dalam HTML5 tidak boleh berisi spasi putih.

Bisakah beberapa elemen memiliki ID yang sama?

Atribut id HTML digunakan untuk menentukan id unik untuk elemen HTML. Anda tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam dokumen HTML .