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.

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

<
<!DOCTYPE html>
<html>
<head>
<style>
p {
    text-align: center;
    color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

Demo

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

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Demo

Kelas Pemilih

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:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Demo

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-blok:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>