Selector

Selector digunakan untuk memilih elemen HTML yang ingin Anda beri style.

Kita dapat membagi Selector CSS ke dalam lima kategori:

1. Simple selectors (memilih elemen berdasarkan nama, id, kelas)
2. Combinator selectors (memilih elemen berdasarkan hubungan spesifik di antara mereka)
3. Pseudo-class selectors (memilih elemen berdasarkan keadaan tertentu)
4. Pseudo-elements selectors (memilih dan memberi gaya pada bagian dari elemen)
5. Attribute selectors (memilih elemen berdasarkan atribut atau nilai atribut)

Simple Selectors

1. Selector berdasarkan Elemen

Selector berdasarkan elemen memilih semua elemen berdasarkan nama tag HTML-nya. Misalnya, jika kita ingin memberi gaya pada semua elemen <p>, kita akan menggunakan selector seperti ini:

p {
    color: blue;
    font-size: 18px;
}

Hasilnya, semua tag <p> pada HTML akan memiliki style berwarna biru dan ukuran font 18px.

2. Selector berdasarkan ID

Selector berdasarkan ID akan memilih elemen berdasarkan ID uniknya. Selector berdasarkan ID diawali dengan tanda pagar (#), diikuti dengan ID elemen yang ingin dipilih.

Contoh, jika ID elemen adalah header, maka:

#header {
    background-color: blue;
    padding: 20px;
}

Hasilnya, tag HTML dengan ID header pada HTML akan memiliki style warna background biru dan padding 20px.

3. Selector berdasarkan Class

Selector berdasarkan Class akan memilih elemen berdasarkan classnya. Selector berdasarkan class harus diawali dengan titik (.), diikuti dengan nama kelas.

Misalnya, jika kita ingin memberi style pada semua elemen dengan class menu:

.menu {
    font-size: 16px;
    color: white;
}

Hasilnya, semua tag HTML dengan class menu pada HTML akan memiliki style ukuran font 16px dan berwarna putih.

Combinator Selector

Combinator Selector (Penggabung) memilih elemen berdasarkan hubungan antar elemen. Beberapa contoh Combinator Selector:

• Descendant Selector (elemen yang ada di dalam elemen lain):

div p {
    color: green;
}

• Child Selector (elemen yang langsung berada di dalam elemen lain):

div > p {
    color: red;
}

Pseudo-class Selector

Pseudo-class selectors memilih elemen berdasarkan keadaan tertentu, seperti ketika elemen sedang difokuskan atau saat kursor mouse berada di atas elemen.

Contoh pseudo-class untuk elemen yang sedang difokuskan:

input:focus {
    background-color: yellow;
}

Contoh pseudo-class untuk elemen ketika kursor mouse berada di atasnya:

a:hover {
    color: red;
}

Pseudo-element Selector

Pseudo-element selector digunakan untuk memilih dan memberi style pada bagian tertentu dari elemen, seperti sebelum atau setelah konten elemen.

Contoh pseudo-element untuk menambahkan konten sebelum elemen:

p::before {
    content: "Note: ";
    font-weight: bold;
}

Attribute Selector

Attribute selector memilih elemen berdasarkan atribut atau nilai atribut yang dimilikinya.

Contoh memilih elemen dengan atribut type="text":

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