Mengenal CSS Selector

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan suatu halaman web. Salah satu elemen penting dalam CSS adalah selector. Selector digunakan untuk memilih elemen HTML yang akan diberikan gaya (style). Dengan selector, kita bisa mengontrol tampilan dari berbagai elemen secara lebih efektif.

Berikut adalah jenis-jenis CSS selector yang perlu kamu ketahui:

1. Universal Selector (*)

Universal selector memilih semua elemen dalam halaman HTML.

* {
    margin: 0;
    padding: 0;
}

Contoh di atas akan menghapus margin dan padding pada semua elemen di halaman.

2. Type Selector

Type selector memilih elemen berdasarkan nama tag HTML. Misalnya, untuk memilih semua elemen <p>, kita gunakan:

p {
    color: blue;
}

Ini akan memberikan warna biru pada semua teks yang ada di dalam elemen <p>.

3. Class Selector

Class selector digunakan untuk memilih elemen yang memiliki atribut class. Selector ini diawali dengan tanda titik (.).

.myClass {
    font-size: 16px;
}

Jika ada elemen dengan class myClass, maka gaya font akan diatur menjadi 16px.

4. ID Selector

ID selector digunakan untuk memilih elemen yang memiliki atribut id. Selector ini diawali dengan tanda pagar (#).

#header {
    background-color: lightgray;
}

Jika elemen memiliki ID header, maka elemen tersebut akan mendapatkan latar belakang berwarna abu-abu muda.

5. Attribute Selector

Attribute selector memilih elemen berdasarkan atribut yang ada di dalam tag HTML. Ada beberapa variasi dari selector ini:

• [attribute]: Memilih elemen yang memiliki atribut tertentu.
• [attribute="value"]: Memilih elemen yang atributnya memiliki nilai tertentu.
• [attribute~="value"]: Memilih elemen yang salah satu nilainya sesuai dengan kata yang diberikan.

Contoh:

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

Selector di atas akan memilih elemen <input> dengan atribut type="text" dan memberikan border hitam.

6. Descendant Selector

Descendant selector memilih elemen yang berada di dalam elemen lain. Selector ini ditulis dengan cara menempatkan selector elemen induk dan anak secara berurutan.

div p {
    color: green;
}

Contoh di atas akan memilih semua elemen <p> yang berada di dalam elemen <div>, dan memberikan warna hijau pada teksnya.

7. Child Selector (>)

Child selector hanya memilih elemen anak langsung dari elemen induknya.

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

Contoh ini menghilangkan bullet list dari elemen <li> yang merupakan anak langsung dari elemen <ul>.

8. Sibling Selector

Sibling selector digunakan untuk memilih elemen yang merupakan saudara (sibling) dari elemen lain:

• Adjacent Sibling Selector (+): Memilih elemen saudara langsung.
• General Sibling Selector (~): Memilih semua elemen saudara.

Contoh:

h1 + p {
    margin-top: 0;
}

Selector di atas mengatur margin atas menjadi 0 untuk elemen <p> yang langsung mengikuti elemen <h1>.

9. Pseudo-class Selector

Pseudo-class selector digunakan untuk memilih elemen berdasarkan status atau interaksi dengan elemen lain. Beberapa contoh umum:

• :hover: Memilih elemen saat mouse berada di atasnya.
• :nth-child(n): Memilih elemen anak ke-n dari elemen induk.

Contoh:

a:hover {
    color: red;
}

Ini akan mengubah warna teks tautan menjadi merah ketika kursor mouse berada di atasnya.

10. Pseudo-element Selector

Pseudo-element selector digunakan untuk memilih bagian tertentu dari elemen, seperti huruf pertama atau baris pertama. Beberapa contoh:

• ::first-letter: Memilih huruf pertama dari teks.
• ::before: Menyisipkan konten sebelum elemen.

Contoh:

p::first-letter {
    font-size: 2em;
}

Ini akan membuat huruf pertama dalam setiap paragraf menjadi lebih besar.

Dengan memahami dan menggunakan CSS selector dengan benar, kita dapat mengontrol gaya dari elemen HTML secara lebih fleksibel dan efisien. Selector yang lebih spesifik membantu kita dalam menciptakan desain web yang lebih terstruktur dan sesuai dengan kebutuhan.