Selektor CSS

Berikut ini adalah penjelasan singkat untuk setiap jenis selector CSS yang Anda sebutkan:

1. Type Selector

Type Selector digunakan untuk menargetkan semua elemen dengan jenis tertentu.

Contoh:

p {
    color: red;
}

2. Class Selector

Class Selector digunakan untuk menargetkan elemen dengan kelas tertentu.

Contoh:

.special {
    font-weight: bold;
}

3. ID Selector

ID Selector digunakan untuk menargetkan elemen dengan ID tertentu.

Contoh:

#header {
    background-color: gray;
}

4. Attribute Selector

Attribute Selector digunakan untuk menargetkan elemen berdasarkan atribut HTML tertentu.

Contoh:

input[type="text"] {
    border: 1px solid black;
}

5. Universal Selector

Universal Selector digunakan untuk menargetkan semua elemen dalam dokumen.

Contoh:

* {
    margin: 0;
    padding: 0;
}

6. Adjacent Sibling Selector (+)

Adjacent Sibling Selector digunakan untuk menargetkan elemen yang menjadi saudara sejajar langsung dari elemen tertentu.

Contoh:

h2 + p {
    font-style: italic;
}

7. General Sibling Selector (~)

General Sibling Selector digunakan untuk menargetkan semua elemen saudara yang sejajar dari elemen tertentu.

Contoh:

h2 ~ p {
    color: blue;
}

8. Child Selector (>)

Child Selector digunakan untuk menargetkan elemen yang menjadi anak langsung dari elemen tertentu.

Contoh:

ul > li {
    list-style-type: none;
}

9. Descendant Selector (space)

Descendant Selector digunakan untuk menargetkan elemen yang menjadi turunan dari elemen tertentu.

Contoh:

div p {
    margin: 10px;
}

10. Pseudo-class:

Pseudo-class digunakan untuk mengubah gaya elemen berdasarkan keadaan spesifik, seperti saat elemen tersebut dihover, aktif, atau memiliki keadaan tertentu.

Contoh penggunaan pseudo-class:

a:hover {
  color: blue; /* Mengubah warna teks saat mouse menghover link */
}

input:invalid {
  border-color: red; /* Menampilkan border merah saat input tidak valid */
}

11. Pseudo-element:

Pseudo-element memungkinkan Anda membuat gaya tambahan untuk bagian-bagian tertentu dari elemen, seperti menambahkan konten sebelum atau setelah elemen tertentu.

Contoh penggunaan pseudo-element:

p::first-line {
  font-weight: bold; /* Membuat baris pertama dalam paragraf menjadi tebal */
}

button::before {
  content: 'Klik: '; /* Menambahkan teks sebelum elemen tombol */
}

Dengan menggunakan berbagai jenis selector CSS ini, Anda dapat menargetkan elemen dengan lebih spesifik dan fleksibilitas dalam mendefinisikan gaya dan tampilan halaman web Anda.