Selectors

CSS Selectors
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
CSS Selectors

CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML (s).

CSS digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan mereka id, kelas, jenis, atribut, nilai atribut dan banyak lagi.
Unsur Pemilih

Pemilih elemen memilih elemen berdasarkan nama elemen.

Anda dapat memilih semua <p> elemen pada halaman seperti ini: (semua <p> elemen akan pusat-blok, dengan warna teks merah)
contoh
p {
     text-align: center;
     color: red;
}

Cobalah sendiri »

Id Selector

Pemilih id menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu.

Id harus unik dalam suatu halaman, sehingga Anda harus menggunakan selector id bila Anda ingin mencari satu, elemen yang unik.

Untuk menemukan elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen.

Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "para1":
contoh
# para1 {
     text-align: center;
     color: red;
}

Cobalah sendiri »

Catatan JANGAN memulai nama ID dengan nomor!

Kelas Pemilih

Pemilih kelas menemukan unsur-unsur dengan kelas khusus.

Pemilih kelas menggunakan atribut class HTML.

Untuk menemukan unsur-unsur dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas:

Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan pusat-blok:
contoh
.center {
     text-align: center;
     color: red;
}

Cobalah sendiri »

Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.

Pada contoh di bawah ini, semua elemen p dengan class = "center" akan pusat-blok:
contoh
p.center {
     text-align: center;
     color: red;
}

Cobalah sendiri »

Catatan JANGAN memulai nama kelas dengan nomor!

pengelompokan Selectors

Dalam style sheet sering ada unsur dengan gaya yang sama:
h1 {
     text-align: center;
     color: red;
}

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

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

Untuk meminimalkan kode, Anda dapat penyeleksi kelompok.

Untuk pemilih kelompok, memisahkan masing-masing pemilih dengan koma.

Pada contoh di bawah ini kita telah dikelompokkan pemilih dari kode di atas:
contoh
h1, h2, p {
     text-align: center;
     color: red;
}