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

```css
p {
    color: red;
}
```

#### 2. Class Selector

Class Selector digunakan untuk menargetkan elemen dengan kelas tertentu.

Contoh:

```css
.special {
    font-weight: bold;
}
```

#### 3. ID Selector

ID Selector digunakan untuk menargetkan elemen dengan ID tertentu.

Contoh:

```css
#header {
    background-color: gray;
}
```

#### 4. Attribute Selector

Attribute Selector digunakan untuk menargetkan elemen berdasarkan atribut HTML tertentu.

Contoh:

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

#### 5. Universal Selector

Universal Selector digunakan untuk menargetkan semua elemen dalam dokumen.

Contoh:

```css
* {
    margin: 0;
    padding: 0;
}
```

#### 6. Adjacent Sibling Selector (+)

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

Contoh:

```css
h2 + p {
    font-style: italic;
}
```

#### 7. General Sibling Selector (\~)

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

Contoh:

```css
h2 ~ p {
    color: blue;
}
```

#### 8. Child Selector (>)

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

Contoh:

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

#### 9. Descendant Selector (space)

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

Contoh:

```css
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:

```css
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:

```css
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.
