Menu
Selector di gunakan untuk memilih nama elemen HTML yang akan di atur tampilannya. Nama selector dapat menggunakan nama dari sebuah elemen HTML atau nama tersendir yang di berikan oleh pengguna. Namun, kita perlu mengetahui bagaimana cara penulisan selector agar dapat berfungsi dengan benar.
Penulisan selector sendiri dikutip dari situs https://www.w3schools.com di kategorikan menjadi 4 yaitu: simple selectors, combinator selectors, pseudo-class selectors, pseudo-elements selectors, dan attribute selectors. Namun, pada artikel ini kita akan membahas satu kategori yaitu simple selectors.
Simple selectors merupakan cara penulisan dasar selectors CSS. Cara penggunaannya memilih nama elemen dasar HTML, baik menggunakan nama elemen, id, dan class untuk mengatur tampilannya.
Berikut ini adalah contoh penulisan simple selectors yang menggunakan nama elemen dasar HTML.
p {
text-align: center;
color: red;
}
Keterangan:
menjadi rata tengah dan berwarna merah.
pada kode HTML.
Agar lebih memahami bagaimana cara menggunakan simple selectors menggunakan basic elemen HTML, Anda ketikkan kode berikut dan tampilkan di browser lalu lihat hasilnya.
<!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>
Setelah Anda memahami simple selectors menggunakan elemen dasar HTML, selanjutnya Anda harus memahami cara penulisan selectors Id. Selectors Id menggunakan nilai atribut Id dari elemen untuk memilih elemen tertentu.
Untuk memilih elemen dengan Id tertentu, Anda harus menambahkan karakter hash “#” dan di ikuti dengan Id elemen. Berikut ini adalah cara penggunaan selectors Id.
#para1 {
text-align: center;
color: red;
}
Keterangan:
Berikut adalah contoh penggunaan selectors Id untuk mengatur tampilan elemen. Untuk mengetahui hasilnya, Anda ketik di teks editor dan tampilkan hasilnya di browser Anda.
<!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>
Selector class digunakan untuk memilih elemen HTML dengan atribut class tertentu. Untuk memilih elemen dengan atribut class di gunakan karakter titik (.) dan di ikuti dengan nama class.
Berikut adalah contoh penulisan selectors class untuk mengatur perataan paragraf dan mengatur warna tulisan pada paragraf.
.center {
text-align: center;
color: red;
}
Keterangan:
Agar lebih memahami bagaimana menerapkan selectors class untuk mengatur tampilan pada elemen HTML, ketikkan kode berikut ini di teks editor dan jalan di browser Anda.
<!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>
Selain contoh diatas, ada beberapa cara penulisan nama selectors. Misalkan Anda juga bisa mengatur hanya elemen tertentu yang di atur tampilannya.
1. Mengatur Elemen Tertentu Dengan Selector Class
Berikut adalah contoh penggunaan selectors class untuk mengatur hanya elemen paragraf yang dapat di ubah dari nama selector class center.
<!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>
2. Mengatur Elemen Secara Universal
Aturan CSS di bawah ini akan memengaruhi setiap elemen HTML di halaman:
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
3. CSS Grouping Selectors
Selector grouping merupakan penulisan nama selector yang di kelompokkan berdasarkan property atau gaya yang sama.
Berikut adalah contoh nama selectors yang belum di kelompokkan sehingga penulisannya lebih panjang.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Contoh penulisan di atas lebih panjang. Oleh karena itu, alangkah baiknya di tulis lebih singkat dengan meminimalkan penulisan kode dengan menggunakan selectors grouping.
Berikut adalah contoh penulisan kode CSS dengan selectors grouping, untuk mengelompokan selector, pisahkan setiap selektor dengan koma (,). Untuk melihat contohnya perhatikan kode berikut ini:
h1, h2, p {
text-align: center;
color: red;
}
Selanjutnya, untuk melihat lebih lengkap penerapannya dalam mengatur tampilan pada elemen HTML, ketikkan kode berikut pada teks editor dan jalanakan di browser Anda.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Kesimpulan dari pembahasan ini bahwa penulisan simple selector dapat di lakukan dengan berbagai cara yaitu menggunakan nama elemen dasar HTML, nama elemen dengan atribut Id atau Class, menggunakan karakter bintang (*) untuk mengatur secara keseluruhan elemen, dan menggabungkan beberapa selectors yang memiliki pengaturan tampilan yang sama.
You cannot copy content of this page
