CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan elemen HTML di halaman web. Salah satu komponen utama dalam CSS adalah selektor. Selektor digunakan untuk memilih elemen HTML yang akan diberikan gaya tertentu.
Dalam artikel ini, kita akan membahas berbagai jenis selektor yang tersedia di CSS.
Panduan Lengkap Selektor di CSS
1. Selektor Dasar
Selektor dasar adalah selektor yang paling umum digunakan dan bekerja dengan nama elemen HTML, kelas, atau ID.
| Jenis Selektor | Sintaks | Keterangan |
|---|---|---|
| Tag | tag | Menggunakan nama tag HTML untuk memilih elemen tertentu. |
| Kelas | .class | Menggunakan nama kelas untuk memilih elemen. |
| ID | #id | Menggunakan ID unik untuk memilih elemen spesifik. |
| Universal | * | Memilih semua elemen di dalam halaman. |
Contoh:
/* Seleksi elemen berdasarkan tag */
p {
color: blue;
}
/* Seleksi elemen berdasarkan kelas */
.container {
max-width: 1200px;
}
/* Seleksi elemen berdasarkan ID */
#header {
background-color: #333;
color: white;
}
/* Seleksi semua elemen */
* {
margin: 0;
padding: 0;
}2. Selektor Kombinasi
Selektor kombinasi memungkinkan kalian untuk memilih elemen berdasarkan relasi mereka satu sama lain.
| Jenis Selektor | Sintaks | Keterangan |
|---|---|---|
| Descendant | A B | Memilih elemen B yang berada di dalam elemen A. |
| Child | A > B | Memilih elemen B yang merupakan anak langsung dari elemen A. |
| Adjacent | A + B | Memilih elemen B yang langsung mengikuti elemen A. |
| General Sibling | A ~ B | Memilih elemen B yang berada setelah elemen A, tanpa memperhatikan apakah langsung berurutan atau tidak. |
Contoh:
/* Seleksi elemen B di dalam elemen A */
div p {
font-size: 16px;
}
/* Seleksi elemen anak langsung */
ul > li {
list-style-type: none;
}
/* Seleksi elemen berurutan */
h1 + p {
margin-top: 10px;
}
/* Seleksi elemen saudara */
h1 ~ p {
color: gray;
}3. Selektor Atribut
Selektor atribut memungkinkan kalian untuk memilih elemen berdasarkan atribut tertentu yang ada pada elemen tersebut.
| Jenis Selektor | Sintaks | Keterangan |
|---|---|---|
| Atribut | [attr] | Memilih elemen dengan atribut tertentu. |
| Atribut dengan Nilai | [attr="value"] | Memilih elemen dengan atribut yang memiliki nilai tertentu. |
| Atribut dengan Awalan | [attr^="value"] | Memilih elemen dengan atribut yang nilainya dimulai dengan string tertentu. |
| Atribut dengan Akhiran | [attr$="value"] | Memilih elemen dengan atribut yang nilainya diakhiri dengan string tertentu. |
| Atribut yang Mengandung | [attr*="value"] | Memilih elemen dengan atribut yang mengandung string tertentu di dalam nilainya. |
Contoh:
/* Memilih elemen dengan atribut */
input[type] {
padding: 10px;
}
/* Memilih elemen dengan atribut tertentu */
a[target="_blank"] {
color: red;
}
/* Memilih elemen dengan atribut yang memiliki awalan tertentu */
img[src^="https"] {
border: 2px solid green;
}
/* Memilih elemen dengan atribut yang memiliki akhiran tertentu */
a[href$=".pdf"] {
color: blue;
}
/* Memilih elemen dengan atribut yang mengandung string tertentu */
p[class*="warning"] {
background-color: yellow;
}4. Pseudo-Kelas
Pseudo-kelas memungkinkan kalian untuk memilih elemen berdasarkan status atau posisi khusus, seperti elemen pertama dari jenisnya atau ketika elemen tersebut sedang dihover.
| Pseudo-Kelas | Sintaks | Keterangan |
|---|---|---|
selector:hover | Memilih elemen saat dihover. | |
selector:first-child | Memilih elemen yang merupakan anak pertama dari elemen induknya. | |
selector:last-child | Memilih elemen yang merupakan anak terakhir dari elemen induknya. | |
(n) | selector:nth-child(n) | Memilih elemen berdasarkan posisi urutan anak. |
selector:focus | Memilih elemen saat sedang dalam keadaan fokus. |
Contoh:
/* Mengubah warna ketika dihover */
button:hover {
background-color: orange;
}
/* Memilih anak pertama */
li:first-child {
font-weight: bold;
}
/* Memilih anak terakhir */
li:last-child {
font-style: italic;
}
/* Memilih elemen dengan urutan tertentu */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Memilih elemen dalam keadaan fokus */
input:focus {
border: 1px solid blue;
}5. Pseudo-Elemen
Pseudo-elemen digunakan untuk memilih dan memberikan gaya pada bagian tertentu dari elemen. Ini sering digunakan untuk menambahkan konten atau memberikan gaya pada bagian tertentu dari teks.
| Pseudo-Elemen | Sintaks | Keterangan |
|---|---|---|
| ::before | selector::before | Menyisipkan konten sebelum isi elemen. |
| ::after | selector::after | Menyisipkan konten setelah isi elemen. |
| ::first-line | selector::first-line | Memberikan gaya pada baris pertama dari teks elemen. |
| ::first-letter | selector::first-letter | Memberikan gaya pada huruf pertama dari teks elemen. |
Contoh:
/* Menambahkan konten sebelum elemen */
p::before {
content: "Note: ";
font-weight: bold;
}
/* Menambahkan konten setelah elemen */
p::after {
content: " - End";
font-style: italic;
}
/* Gaya untuk baris pertama */
p::first-line {
color: red;
}
/* Gaya untuk huruf pertama */
p::first-letter {
font-size: 2em;
color: blue;
}Kesimpulan
Selektor CSS menawarkan fleksibilitas dalam memilih dan menyesuaikan elemen HTML. Dengan memahami setiap jenis selektor, kalian dapat membuat desain yang lebih terstruktur dan efektif. Ingatlah untuk memanfaatkan selektor ini sesuai kebutuhan, sehingga kode CSS kalian tetap rapi dan mudah dikelola.
Semoga artikel ini membantu kalian dalam memahami penggunaan selektor di CSS, sekian dari analiswinter.com terimakasih.