Selektor class

Pelajaran 4 dari 15 dalam kursus Selector CSS di Coddy.

Selector class adalah jenis selector CSS yang memilih elemen dengan atribut class tertentu. Atribut class adalah atribut khusus yang bisa kamu tambahkan ke elemen HTML untuk mengelompokkannya.

Untuk memilih elemen dengan class tertentu, gunakan titik (.) yang diikuti nama class. Misalnya, selector .my-class memilih semua elemen yang memiliki class my-class.

Berikut contoh cara menggunakan selector class untuk memberi gaya pada halaman web:

.my-class {
  color: red;
  font-size: 2em;
}

Untuk menambahkan class ke elemen, tulis:

<div class="my-class"></div>

Aturan CSS ini akan memberi gaya merah dan ukuran font 2em pada semua elemen yang memiliki class my-class.

Tantangan

Mudah

Buat halaman web dengan tiga elemen h1.
Tambahkan class ke elemen h1 pertama.
Tambahkan class lain ke elemen h1 kedua.
Gunakan selector class CSS untuk memberi warna merah pada elemen h1 pertama dan mengatur ukuran font menjadi 64px.
Gunakan selector class CSS lain untuk memberi warna biru pada elemen h1 lainnya dan mengatur ukuran font menjadi 32px.

Coba sendiri

<html>
<head>
  <title>Class Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  
</body>
</html>

Semua pelajaran di Selector CSS

1Pengenalan CSS Selectors

Tujuan CSS Selectors Mengapa penting?

4Selector Atribut

Pengantar Selector Atribut Keberadaan dan Nilai Tepat Selector Nilai Atribut Selector Nilai Atribut II Selector Nilai Atribut III

2Selektor Sederhana

Selektor tipeSelektor classSelektor ID Selektor universal

3Selector Kombinator

Selector anak Selector keturunan Selector saudara berdekatan Selector saudara umum

Latihan sendiri: Playground Web