Di artikel sebelumnya, kita sudah mempelajari cara menambahkan komentar di CSS.
Dalam artikel ini, kita akan mempelajari secara lengkap mengenai penggunaan Selektor elemen, Selektor ID, Selektor Class, Selektor Universal, Selektor Group, Selektor Atribut, Selektor Pseudo-class, dan Selektor Pseudo-elemen.
Sebelum latihan menggunakan selektor dalam CSS, mari kita buat file HTML nya terlebih dahulu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selector CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<h1>Selamat Datang di Website Kami</h1>
</header>
<h1>Artikel Mandan Koding</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a href="#" class="fb"> Facebook </a>
<a href="#" class="ig"> Instagram </a>
<a href="#" class="yt"> Youtube </a>
</body>
</html> 1. Selektor Elemen
Selektor elemen merupakan salah satu jenis selektor yang paling dasar dan paling sering di gunakan. Selektor elemen memilih elemen HTML berdasarkan nama elemen yang di tentukan.
Misalkan kita ingin mengubah gaya teks pada semua elemen paragraf <p> dalam halaman web. Kita dapat menggunakan selektor elemen p dalam CSS untuk mengubahnya.
Berikut kode CSS nya:
p {
color: blue;
font-size: 16px;
} 
2. Selektor ID
Setiap ID harus unik di dalam satu halaman HTML. Artinya, setiap elemen hanya boleh memiliki satu ID yang sama, dan ID tersebut tidak boleh di gunakan pada elemen lain dalam halaman yang sama. Konsep ini di kenal sebagai “unik dalam satu halaman” dan merupakan aturan yang sangat penting untuk diikuti.
Mengapa ID harus unik? Hal ini terkait dengan cara browser dan mesin pencari mengidentifikasi dan memanipulasi elemen dalam halaman web. Ketika browser menemukan selektor ID dalam CSS, seperti #header, ia akan mencari elemen dengan ID yang cocok di dalam dokumen HTML.
Jika ada beberapa elemen dengan ID yang sama, browser mungkin akan mengalami kesulitan dalam menentukan elemen mana yang harus di berikan gaya atau di pengaruhi oleh aturan CSS tertentu.
Penggunaan ID dalam CSS di tandai dengan sintaksis “#” lalu diikuti dengan nama ID yang unik. Berikut contoh sintaksis selektor ID:
#nama-id {
/* Style CSS */
} Contoh penggunaan Selektor ID:
Kita memiliki elemen dengan nama atribut ID nya yaitu <header>, kemudian kita akan mengubah gaya tampilannya secara spesifik. Berikut adalah contoh kode CSS nya:
#header {
background-color: skyblue;
padding: 10px;
text-align: center;
font-size: 20px;
} Output:
3. Selektor Class
Selektor Class di gunakan untuk memilih elemen HTML berdasarkan nama class yang di tetapkan pada elemen tersebut.
Untuk menggunakan selektor class, Kamu perlu menambahkan tanda titik (.) di ikuti dengan nama class yang ingin Kamu seleksi. Berikut adalah contoh sintaksis selektor class:
.nama-class {
/* aturan gaya CSS */
}
Contoh penggunaan selektor class:
Kita akan mengubah gaya tautan media sosisal agar terlihat lebih berwarna. Berikut contoh kode CSS nya:
.fb {
background-color: blue;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
}
.ig {
background-color: deeppink;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
}
.yt {
background-color: red;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
}
Output:
Dalam contoh di atas, selektor class .fb .ig. yt mengubah tampilan tautan link media sosial menjadi lebih berwarna.
4. Selektor Universal
Selektor universal di gunakan untuk memilih semua elemen pada halaman web. Artinya dengan menggunakan selektor universal, Kamu dapat mengubah gaya tampilan semua elemen secara bersamaan.
Untuk menggunakan selektor universal, Kamu dapat menggunakan tanda asterisk (*) sebagai selektornya. Berikut adalah contoh sintaksis selektor universal:
* {
/* aturan gaya CSS */
}
Contoh penggunaan selektor universal:
Kita akan mengubah gaya tampilan semua elemen pada halaman web dengan warna latar belakang yang sama dan warna tulisan yang sama. Berikut adalah contoh kode CSS nya:
* {
background-color: black;
color : white;
}
Output:
5. Selektor Group
Dalam CSS, selektor group memungkinkan Kamu untuk memilih beberapa elemen dengan gaya yang sama secara bersamaan.
Bahwa dengan menggunakan selector group, penulisan kode CSS bisa lebih di persingkat.
Untuk menggunakan selektor group, Kamu dapat menuliskan selektor-selektor yang ingin Kamu pilih dan atur gayanya, kemudian memisahkannya dengan koma (,). Berikut adalah contoh sintaksis selektor group:
selektor1, selektor2, selektor3 {
/* aturan gaya CSS yang sama untuk semua selektor */
}
Contoh penggunaan selektor group:
Kita akan mengubah gaya elemen class dari tautan (Facebook, Instagram, dan Youtube) menjadi lebih tertata lagi dengan menambahkan margin untuk mengatur jarak antara media sosial, border-radius untuk memberikan efek sudut tumpul, dan text-decoration untuk menghilangkan garis bawah pada tautan. Berikut adalah contoh kode CSS nya:
.fb, .ig, .yt {
margin: 5px;
border-radius: 35px;
text-decoration: none;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
}
.fb {
background-color: blue;
}
.ig {
background-color: deeppink;
}
.yt {
background-color: red;
}
Output:
6. Selektor Atribut
Selektor atribut memungkinkan Kamu untuk memilih elemen berdasarkan atribut dan nilai atribut yang di tetapkan pada elemen tersebut.
Selektor atribut ditulis dengan tanda kurung siku [attribut] untuk memilih elemen berdasarkan atribut yang ditetapkan pada elemen tersebut. Contoh sintaksis selektor atribut:
[attribut] {
/* aturan gaya CSS */
}
Contoh penggunaan selektor atribut:
Kita akan memberikan gaya pada semua elemen yang memiliki atribut href.
[href] {
background-color: lightgreen;
color: black;
margin: 5px;
}
Output:
7. Selektor Pseudo-Class
Selektor pseudo-class berguna ketika Kamu ingin memberikan gaya khusus pada elemen dalam keadaan tertentu. Pseudo-class di tandai dengan menggunakan titik dua (:) kemudian di ikuti dengan nama pseudo-class seperti :hover, :active, :first-child, dan lain-lain.
Contoh sintaksis selektor pseudo-class:
selector:pseudo-class {
/* aturan gaya CSS */
}
Berikut beberapa contoh selektor pseudo-class yang umum di gunakan:
:hover Memilih elemen saat kursor mouse di arahkan kepada elemen tersebut. :active Memilih elemen saat sedang dalam keadaan aktif atau di klik. :first-child Memilih elemen pertama dalam setiap elemen induk. :last-child Memilih elemen terakhir dalam setiap elemen induk. :nth-child(n) Memilih elemen ke-n dalam setiap elemen induk.
Contoh penggunaan selektor pseudo-class:
Kita ingin menerapkan gaya :hover pada judul h1, yaitu ketika mouse didekatkan pada judul, maka tulisan akan berubah warna menjadi warna biru.
h1:hover{
color: blue;
}
Output:
8. Selektor Pseudo-Element
Selektor pseudo-element memungkinkan Kamu untuk memilih dan memberikan gaya pada bagian-bagian spesifik dari elemen HTML. Pseudo-elemen berbeda dengan pseudo-kelas karena mereka memilih bagian dalam elemen, bukan elemen itu sendiri. Pseudo-elemen di tandai dengan menggunakan tanda titik dua ganda (::) kemudian di ikuti dengan nama pseudo-elemen seperti ::before, ::after, ::first-line, dan lain-lain.
Contoh sintaksis selektor pseudo-elemen:
selektor::pseudo-elemen {
/* aturan gaya CSS */
}
Berikut beberapa contoh selektor pseudo-elemen yang umum di gunakan:
::before Memilih dan mengubah gaya bagian sebelum isi dari elemen terpilih. ::after Memilih dan mengubah gaya bagian setelah isi dari elemen terpilih. ::first-line Memilih dan mengubah gaya baris pertama dari isi elemen terpilih. ::first-letter Memilih dan mengubah gaya huruf pertama dari isi elemen terpilih. ::selection Memilih dan mengubah gaya saat pengguna memilih teks pada halaman.
Contoh penggunaan selektor pseudo-elemen:
Kita akan mengubah gaya awalan huruf yang ada pada paragraf pertama menjadi lebih besar dari yang lainnya. Berikut contoh kode CSS nya:
p:first-of-type::first-letter{
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
Output:
Kesimpulan:
Memahami dan menggunakan berbagai jenis selektor dalam CSS merupakan keterampilan yang penting dalam pengembangan web. Dalam artikel ini, Kamu telah mempelajari selektor elemen, selektor ID, selektor class, selektor universal, selektor group, selektor atribut, selektor pseudo-kelas, dan selektor pseudo-elemen secara lengkap. Dengan menggunakan selektor yang tepat, Kamu dapat mengubah gaya elemen-elemen pada halaman web dengan presisi dan fleksibilitas. Teruslah berlatih dan eksplorasi dengan selektor CSS untuk menguasai seni mengatur tampilan halaman web dengan gaya yang sesuai dengan kebutuhan Kamu.
Tutorial Selanjutnya:
CSS Colors – Memahami Penulisan Kode Warna dalam CSS
Tinggalkan Balasan