Oke, kita gas lagi dengan materi selector yang lebih canggih: Selector Atribut & Pseudo CSS. Di sini kita akan belajar cara menargetkan elemen berdasarkan atribut yang dimilikinya, atau berdasarkan state dan bagian tertentu dari elemen tersebut.

Nargetin Elemen Makin Jitu: Kenalan Sama Selector Atribut & Pseudo-class/element!

Udah jago kan pake selector dasar dan kombinasi? Keren! Tapi, CSS masih punya senjata lain yang lebih canggih buat nargetin elemen dengan kondisi yang lebih spesifik lagi. Kita bakal kenalan sama tiga "pasukan khusus" selector:

1. Attribute Selectors (Selektor Atribut): Milih elemen berdasarkan atribut atau nilai atributnya.
2. Pseudo-classes: Milih elemen berdasarkan state atau kondisi tertentu (misalnya, pas di-hover mouse, atau link yang udah pernah dikunjungi).
3. Pseudo-elements: Milih dan ngasih style ke bagian tertentu dari sebuah elemen (misalnya, huruf pertama paragraf, atau nambahin konten sebelum/sesudah elemen).

Siap buat ngulik jurus-jurus baru ini?

1. Attribute Selectors (Selektor Atribut) - Milih Berdasarkan "KTP" Elemen

Kadang, kita mau ngasih style ke elemen yang punya atribut tertentu, atau yang nilai atributnya cocok sama kriteria kita. Di sinilah Attribute Selectors berperan. Mereka ditulis di dalem kurung siku [ ].

Ada beberapa jenis Attribute Selector:

• [namaAtribut]: Milih semua elemen yang punya atribut namaAtribut, gak peduli apa nilainya.

  • Contoh: [title] (milih semua elemen yang punya atribut title).
  • Contoh: a[target] (milih semua link <a> yang punya atribut target).

• [namaAtribut="nilaiPersis"]: Milih semua elemen yang punya atribut namaAtribut dengan nilai yang persis sama dengan nilaiPersis.

  • Contoh: input[type="text"] (milih semua elemen <input> yang atribut type-nya persis "text").
  • Contoh: a[href="https://www.google.com"] (milih link yang href-nya persis ke Google).

• [namaAtribut~="nilaiKata"]: Milih elemen yang atribut namaAtribut-nya mengandung kata nilaiKata secara utuh (dipisahkan spasi).

  • Contoh: [class~="penting"] (milih elemen yang di atribut class-nya ada kata penting, misal class="info penting sorot").

• [namaAtribut|="nilaiAwalan"]: Milih elemen yang atribut namaAtribut-nya punya nilai yang diawali dengan nilaiAwalan dan diikuti tanda hubung (-) atau persis sama dengan nilaiAwalan. Biasanya dipake buat atribut lang.

  • Contoh: [lang|="en"] (milih elemen dengan lang="en" atau lang="en-US").

• [namaAtribut^="awalanNilai"]: Milih elemen yang atribut namaAtribut-nya diawali dengan awalanNilai.

  • Contoh: a[href^="https://"] (milih semua link yang href-nya diawali https://).

• [namaAtribut$="akhiranNilai"]: Milih elemen yang atribut namaAtribut-nya diakhiri dengan akhiranNilai.

  • Contoh: img[src$=".png"] (milih semua gambar yang sumbernya (src) berakhiran .png).

• [namaAtribut*="bagianNilai"]: Milih elemen yang atribut namaAtribut-nya mengandung bagianNilai di mana pun di dalem nilainya.

  • Contoh: a[href*="tutorial"] (milih semua link yang href-nya mengandung kata "tutorial").

Contoh Penggunaan di CSS:

/* Semua link yang punya atribut target akan punya ikon panah keluar */
a[target]::after { /* Kita pake pseudo-element ::after di sini, nanti dibahas */
    content: " ↗";
}
 
/* Input field bertipe "submit" akan punya background hijau */
input[type="submit"] {
    background-color: green;
    color: white;
}
 
/* Semua gambar yang sumbernya dari domain "example.com" akan punya border */
img[src*="example.com"] {
    border: 2px solid blue;
}
 
/* Paragraf dengan atribut data-penting="true" */
p[data-penting="true"] {
    font-weight: bold;
    color: red;
}

Attribute selectors ini ngebantu banget buat styling yang lebih kontekstual berdasarkan "data" yang ada di atribut elemen.

2. Pseudo-classes - Milih Berdasarkan Kondisi atau State Elemen

Pseudo-classes dipake buat nambahin style ke elemen berdasarkan state (kondisi) tertentu elemen itu, atau hubungannya dengan elemen lain, atau posisinya di antara saudara-saudaranya. Pseudo-class selalu diawali dengan satu titik dua (:).

Beberapa pseudo-class yang paling sering dipake:

• State Interaksi Pengguna:

  • :link : Milih link yang belum pernah dikunjungi.
  • :visited : Milih link yang udah pernah dikunjungi. (Properti yang bisa di-style terbatas karena alasan privasi).
  • :hover : Milih elemen pas kursor mouse lagi ada di atasnya. Ini sering banget dipake buat efek interaktif!
  • :active : Milih elemen pas lagi diklik (atau ditekan tombolnya).
  • :focus : Milih elemen pas lagi dapet fokus (biasanya elemen input form atau link yang di-Tab). Penting buat aksesibilitas.

• State Input Form:

  • :checked : Milih elemen input (checkbox atau radio button) yang lagi tercentang/terpilih.
  • :disabled : Milih elemen input yang dinonaktifkan (punya atribut disabled).
  • :enabled : Milih elemen input yang aktif (gak disabled).
  • :required : Milih elemen input yang punya atribut required.
  • :optional : Milih elemen input yang gak punya atribut required.
  • :valid / :invalid : Milih elemen input berdasarkan status validasi bawaan HTML5.

• Struktural & Posisi:

  • :first-child : Milih elemen yang jadi anak pertama dari parent-nya.
  • :last-child : Milih elemen yang jadi anak terakhir dari parent-nya.
  • :nth-child(n) : Milih elemen berdasarkan posisinya di antara saudara-saudaranya. n bisa berupa angka (misal, :nth-child(3) buat anak ke-3), keyword (odd atau even buat anak ganjil/genap), atau formula (2n, 3n+1).
  • :nth-last-child(n) : Mirip :nth-child(n) tapi ngitungnya dari belakang.
  • :first-of-type : Milih elemen pertama dari jenis tag-nya di antara saudara-saudaranya.
  • :last-of-type : Milih elemen terakhir dari jenis tag-nya.
  • :nth-of-type(n) : Mirip :nth-child(n) tapi cuma ngitung elemen dengan jenis tag yang sama.
  • :only-child : Milih elemen yang jadi satu-satunya anak dari parent-nya.
  • :only-of-type : Milih elemen yang jadi satu-satunya anak dari jenis tag-nya di antara saudara-saudaranya.
  • :empty : Milih elemen yang gak punya anak sama sekali (termasuk teks).
  • :root : Milih elemen root dokumen (biasanya <html>).

• Lain-lain:

  • :not(selector) : Milih elemen yang TIDAK cocok sama selector di dalem kurung.

Contoh Penggunaan Pseudo-classes:

/* Link biasa warnanya biru, pas di-hover jadi merah dan ada garis bawah */
a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: orange;
}
 
/* Input field pas dapet fokus, bordernya jadi biru */
input:focus {
    border-color: dodgerblue;
    outline: none; /* Hilangin outline default browser kadang diperlukan */
}
 
/* Baris ganjil di tabel dikasih background beda (efek zebra) */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
/* Tombol yang disabled jadi abu-abu dan kursornya beda */
button:disabled {
    background-color: lightgray;
    cursor: not-allowed;
}
 
/* Semua paragraf kecuali yang punya class "abaikan" */
p:not(.abaikan) {
    margin-bottom: 1em;
}

3. Pseudo-elements - Ngasih Style ke Bagian Spesifik Elemen

Kalau pseudo-class nargetin elemen berdasarkan state-nya, Pseudo-elements dipake buat ngasih style ke bagian tertentu dari sebuah elemen yang dipilih, atau buat nambahin konten sebelum atau sesudah konten asli elemen itu. Pseudo-element selalu diawali dengan dua titik dua (::) (meskipun beberapa pseudo-element lama masih bisa pake satu titik dua buat kompatibilitas, praktik modernnya adalah dua titik dua).

Beberapa pseudo-element yang umum:

• ::before: Nambahin konten (biasanya dekoratif atau ikon) sebelum konten asli dari elemen yang dipilih. Kontennya ditambahin pake properti content.

• ::after: Nambahin konten setelah konten asli dari elemen yang dipilih. Sama, pake properti content.

  • Konten yang ditambahin pake ::before dan ::after itu gak ada di DOM HTML asli, jadi gak bisa dipilih sama JavaScript secara langsung sebagai elemen biasa. Mereka itu bagian dari styling.

• ::first-letter: Nargetin huruf pertama dari konten teks elemen blok. Sering dipake buat bikin efek drop cap.

• ::first-line: Nargetin baris pertama dari konten teks elemen blok.

• ::marker: Nargetin penanda (bullet atau nomor) dari elemen list item (<li>).

• ::selection: Nargetin bagian teks yang lagi di-highlight atau dipilih (selected) sama pengguna.

• ::placeholder: Nargetin teks placeholder di elemen input form. (Beberapa browser mungkin masih butuh prefix vendor kayak ::-webkit-input-placeholder).

Contoh Penggunaan Pseudo-elements:

/* Nambahin tanda kutip sebelum dan sesudah elemen blockquote */
blockquote::before {
    content: "“"; /* Karakter kutip buka */
    font-size: 2em;
    color: gray;
}
blockquote::after {
    content: "”"; /* Karakter kutip tutup */
    font-size: 2em;
    color: gray;
}
 
/* Huruf pertama setiap paragraf jadi lebih besar dan beda warna */
p::first-letter {
    font-size: 200%; /* 2 kali ukuran font normal paragraf */
    color: maroon;
    float: left; /* Biar teks lain ngalir di sekelilingnya */
    margin-right: 5px;
}
 
/* Ganti warna bullet default di list item */
ul li::marker {
    color: green;
    font-size: 1.2em;
    /* content: "✔ ";  Kamu bahkan bisa ganti simbol marker-nya! */
}
 
/* Teks yang lagi di-select pengguna jadi punya background kuning dan teks hitam */
::selection {
    background-color: yellow;
    color: black;
}
 
/* Style placeholder di input */
input::placeholder {
    color: lightgray;
    font-style: italic;
}

Wih, makin banyak ya senjata selector CSS-mu! Dengan Attribute Selector, Pseudo-class, dan Pseudo-element, kamu bisa bikin styling yang jauh lebih dinamis, kontekstual, dan detail.

Jangan takut buat nyoba-nyoba semua jenis selector ini. Cara terbaik buat ngertiinnya adalah dengan langsung dipraktekkin. Perhatiin gimana mereka bisa ngubah tampilan elemen dalam kondisi-kondisi tertentu atau di bagian-bagian spesifiknya.

Selanjutnya, kita bakal mulai masuk ke properti-properti CSS fundamental yang ngatur tampilan visual, dimulai dari warna dan background!