CSS Selectors

CSS Selectors

CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML.

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

The element Selector

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)

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

The id Selector

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

Id harus unik dalam suatu halaman, sehingga pemilih id digunakan jika Anda ingin memilih satu, elemen yang unik.

Untuk memilih 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":

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

The class Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus.

Untuk memilih elemen dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas:

Pada contoh di bawah ini, semua elemen HTML dengan class = "center" akan pusat-blok:

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

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

Dalam contoh di bawah, semua <p> elemen dengan class = "center" akan pusat-aligne

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

Grouping Selectors

Jika Anda memiliki elemen dengan definisi gaya yang sama, seperti ini:

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

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

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

Anda dapat kelompok pemilih, untuk meminimalkan kode.

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

Pada contoh di bawah ini kita telah dikelompokkan pemilih dari kode di atas:

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