[Tutoriial CSS #3] Selektor class - id CSS dan Pengelompokan CSS

Selektor CSS

Selektor CSS digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda gaya.

Kami dapat membagi selektor CSS menjadi lima kategori:

• Selektor sederhana (pilih elemen berdasarkan nama, id, kelas)
• Penyeleksi Combinator (elemen pilih berdasarkan hubungan tertentu di antara mereka)
• Selektor pseudo-kelas (pilih elemen berdasarkan kondisi tertentu)
• Selektor elemen semu (pilih dan gaya bagian dari suatu elemen)
• Selektor atribut (elemen terpilih berdasarkan atribut atau nilai atribut)

Halaman ini akan tentang menjelaskan Selektor sederhana CSS.

---

Selektor Elemen CSS

Selektor elemen memilih elemen HTML berdasarkan nama elemen.

Contoh: Di sini, semua elemen <p> pada halaman akan disejajarkan dengan pusat (Rata Tengah), dengan warna teks merah:

p {
  text-align: center;
  color: red;
}

Contoh Penulisan:

<p>Setiap paragraf akan dipengaruhi oleh gaya.</p>
<p>Saya juga!</p>
<p>Dan Saya!</p>

Contoh Jadi:

Setiap paragraf akan dipengaruhi oleh gaya.

Saya juga!

Dan Saya!

---

Selektor id CSS

Selektor id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

Id suatu elemen adalah unik di dalam sebuah halaman, jadi Selektor id digunakan untuk memilih satu elemen unik!

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti oleh id elemen.

Contoh: Aturan CSS di bawah ini akan diterapkan ke elemen HTML dengan id="para1":

#para1 {
  text-align: center;
  color: red;
}

Contoh Penulisan:

<p id="para1">Hello World!</p>
<p>Paragraf ini tidak terpengaruh oleh gaya.</p>

Contoh Jadi:

Hello World!

Paragraf ini tidak terpengaruh oleh gaya.

Catatan: Nama id tidak dapat dimulai dengan angka!

---

Selektor class CSS

Selektor class memilih elemen HTML dengan atribut class tertentu.

Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), Diikuti dengan nama class.

Contoh: Dalam contoh ini semua elemen HTML dengan class="center" akan berwarna merah dan sejajar tengah:

<style>
.center {
  text-align: center;
  color: red;
}
</style>

Contoh Penulisan:

<h1 class="center">Judul merah dan rata tengah</h1>
<p class="center">Paragraf merah dan rata tengah.</p> 

Contoh Jadi:

Judul merah dan rata tengah

Paragraf merah dan rata tengah.

---

Anda juga dapat menentukan bahwa hanya elemen HTML spesifik yang akan dipengaruhi oleh kelas.

Contoh: Dalam contoh ini hanya elemen <p> dengan class="center" yang akan disejajarkan dengan pusat:

<style>
p.center {
  text-align: center;
  color: red;
}
</style>

Contoh Penulisan:

<h1 class="center">Judul ini tidak akan terpengaruh</h1>
<p class="center">Paragraf ini akan berwarna merah dan sejajar tengah.</p> 

Contoh Jadi:

Judul ini tidak akan terpengaruh

Paragraf ini akan berwarna merah dan sejajar tengah.

---

Elemen HTML juga dapat merujuk ke lebih dari satu kelas.

Contoh: Dalam contoh ini elemen <p> akan ditata sesuai dengan class="center" dan ke class="large":

<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>

Contoh Penulisan:

<h1 class="center">Judul ini tidak akan terpengaruh</h1>
<p class="center">Paragraf ini akan berwarna merah (red) dan sejajar tengah (center-aligned).</p>
<p class="center large">Paragraf ini akan berwarna merah, sejajar tengah (center-aligned), dan dalam ukuran font yang besar (font-size).</p> 

Contoh Jadi:

Judul ini tidak akan terpengaruh

Paragraf ini akan berwarna merah (red) dan sejajar tengah (center-aligned).

Paragraf ini akan berwarna merah,

sejajar tengah (center-aligned), dan dalam

ukuran font yang besar (font-size).

---

Selektor Pengelompokan CSS

Seleksi pengelompokan memilih semua elemen HTML dengan definisi gaya yang sama.

Lihatlah kode CSS berikut (elemen h1, h2, dan p memiliki definisi gaya yang sama):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Akan lebih baik untuk mengelompokkan slektor, untuk meminimalkan kode.

Untuk penyeleksi grup, pisahkan setiap Selektor dengan koma.

h1, h2, p {
  text-align: center;
  color: red;
}

---

Semua Selektor Sederhana CSS

Selektor	Contoh	Contoh Deskripsi
.class	.intro	Pilih semua elemen dengan class="intro"
#id	#firstname	Pilih elemen dengan id="firstname"
elemen	p	Memilih semua elemen <p>
elemen, elemen	p, div	Memilih semua elemen <p>, <div>

Selanjutnya > Cara Menambahkan CSS

Share this post