Pada panduan pemilihan terakhir ini, saya akan memperkenalkan kepada Anda sebuah bentuk selektor yang sangat khusus. Mereka disebut sebagai pseudo-class dan pseudo-element. Mereka adalah selektor yang tidak merujuk pada elemen HTML tertentu, tetapi dibuat oleh perangkat output.
Dengan pseudo-class dan pseudo-element, deklarasi dapat ditetapkan untuk komponen-komponen HTML yang tidak dapat dijelaskan secara tepat melalui elemen HTML. Contoh umumnya adalah tautan hiperteks yang baru diklik atau yang belum dikunjungi.
Menyusun Tautan
Sering kali, Anda ingin menyusun tautan pada halaman tersebut. CSS menyediakan berbagai cara untuk menangani berbagai keadaan tautan secara visual.
Jika Anda ingin memberikan warna merah pada tautan, Anda dapat melakukannya dengan cara berikut:
a:link {
color: merah;
}
Dengan a:visited, tautan yang telah dikunjungi akan ditandai. Dengan sintaks berikut, tautan yang pernah diklik akan ditampilkan dengan warna biru.
a:visited {
color: biru;
text-decoration: none;
}Di browser, tampilan akan terlihat seperti ini:
Jika Anda ingin mengkhususkan tautan yang sedang diklik, itu juga bisa dilakukan.
a:active {
font-weight: bold;
color: biru;
text-decoration: none;
}
Sintaks yang digunakan adalah a:active.
Sementara a:hover mengacu pada keadaan saat kursor bergerak di atas tautan. Selain itu, dengan a:focus terdapat pseudo-element lainnya. Ini menggambarkan saat tautan mendapat fokus.
Pseudelemen Lainnya
Ada pseudo-element, yang memungkinkan Anda menargetkan bagian-bagian dari elemen lain. Contoh khasnya adalah ::first-letter. Pseudo-element ini memilih karakter pertama dari elemen saat ini. Ini dapat digunakan untuk semua elemen yang berisi teks. Namun perhatikan: pseudo-element harus ditulis di akhir semua selektor. Mereka harus berada sebelum kurung kurawal pembuka.
h1::first-letter {
color: biru;
}
Melalui ::first-line, baris pertama elemen dapat dijangkau. Pseudo-element ini hanya dapat diterapkan pada elemen tingkat blok. Contoh:
p::first-line {
latar-belakang: biru;
}
Dan inilah hasilnya di peramban:
sebuah
Dengan kedua pseudo-element :after dan :before, konten tambahan dapat ditampilkan sebelum dan sesudah suatu elemen. Dengan content, ditentukan apa yang akan ditampilkan.
• normal – pseudo-element yang biasanya ditetapkan tidak dihasilkan.
• none – pseudo-element tidak dihasilkan.
• <string> – string yang diberikan di sini akan dihasilkan. String harus ditempatkan dalam tanda kutip tunggal atau ganda.
• <uri> – sumber yang ditentukan dalam URI akan dimasukkan.
• <counter> – mendefinisikan atau menargetkan suatu counter tertentu.
• attr(<identifier>) – nilai atribut yang diberikan dalam tanda kurung akan dimasukkan.
• close-quote – sisipkan tanda kutip penutup.
• no-close-quote – meskipun tanda kutip penutup tidak disisipkan, kedalaman pengepungan meningkat satu tingkat.
• no-open-quote – meskipun tanda kutip pembuka tidak disisipkan, kedalaman pengepungan meningkat satu tingkat.
• open-quote – sisipkan tanda kutip pembuka.
Contoh:
ul li:before {
content: uri("bullet.gif");
}
Dengan CSS3, pseudo-selector :not diperkenalkan. Ini memungkinkan Anda untuk dengan mudah memilih konten secara spesifik. Contoh pertama akan menunjukkan seberapa kuat selector pseudo ini sebenarnya. Misalnya, Anda ingin memilih semua tautan yang tidak memiliki atribut href. Sintaks yang sesuai akan terlihat sebagai berikut:
a:not([href])
Tautan "normal" tidak akan terpengaruh oleh sintaks ini. Namun, akses ke definisi anchor akan berhasil.
<a name="top">Seitenanfang</a>
Contoh yang sedikit lebih lengkap akan menjelaskan kekuatan dari :not. Dalam sebuah dokumen, berbagai paragraf teks telah ditentukan.
<body> <h1>PSD-Tutorials.de</h1> <p>Ini adalah sebuah paragraf.</p> <p>Ini adalah paragraf lainnya.</p> <div>Ini adalah area teks.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Selain paragraf yang ditandai dengan p, ada juga area div dan hyperlink. Sekarang, hal berikut harus terjadi:
• Semua paragraf yang ditandai dengan p akan memiliki warna teks hitam.
• Di tempat lain di mana tidak ada paragraf p, warna teks merah akan digunakan.
Sintaks CSS yang sesuai terlihat seperti ini:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Prinsip Warisan
Salah satu hal terpenting dalam pemahaman definisi CSS adalah warisan. Secara faktual, dalam CSS, properti gaya diwarisi dari satu elemen ke elemen lainnya.
Sebagai contoh:
html {
color: red
}Dengan definisi ini, elemen html diberikan warna depan merah.
Berdasarkan prinsip warisan, definisi warna ini pertama-tama akan berlaku untuk semua elemen yang merupakan subelemen dari html. Sekarang, secara default, semua elemen yang berada di bawah html akan ditampilkan dengan warna merah. Keuntungan dari pendekatan ini adalah elemen-elemen ini tidak perlu menentukan warna merah secara eksplisit. Namun, bagaimana jika konten paragraf p tidak ingin ditampilkan dalam warna merah? Maka, definisi warna induk dari html harus ditimpa.
html {
color: red;
}
p {
color: #000;
}
Apa yang terjadi jika sekarang terdapat dua elemen p dan div?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Hasilnya akan terlihat seperti ini:
Definisi warna dari html hanya berlaku untuk konten di div. Sementara itu, paragraf p ditampilkan dengan warna teks hitam.
Dalam CSS, terdapat berbagai cara untuk menetapkan definisi gaya. Ini adalah alasan mengapa untuk sebuah elemen dapat terdapat instruksi yang saling bertentangan. Untuk kasus semacam ini, CSS memiliki prinsip penugasan bobot. Prinsip ini menentukan dengan pasti instruksi mana yang diutamakan untuk sebuah elemen. Saya tidak akan memperjelas prinsip ini secara detail di sini. Namun, informasi terperinci tentang hal ini dapat ditemukan misalnya di situs http://wiki.selfhtml.org/wiki/CSS/Kaskade atau juga di http://www.thestyleworks.de/basics/cascade.shtml.
Yang saya ingin tunjukkan adalah apa yang harus diperhatikan saat menentukan properti CSS. Contoh berikut digunakan untuk tujuan tersebut:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Ini adalah sebuah paragraf dengan kata <strong>tebal</strong>.</p>
<h2>Ini adalah sebuah judul dengan kata <strong>tebal</strong>.</h2>
</div>
</body>
</html>Dalam browser, hasilnya akan terlihat seperti ini:
Seperti yang terlihat, kata-kata yang ditandai dengan strong diformat dengan berbeda. Format mana yang akan digunakan akhirnya tergantung pada urutan definisi.
Sebagai alternatif, ada kata kunci !important, yang memungkinkan Anda menandai sebuah instruksi CSS sebagai sangat penting.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>Sekali lagi, inilah tampilan hasilnya:
Sangat disarankan juga untuk membaca sumber-sumber yang disebutkan dalam tutorial ini. (Meskipun pada awalnya mungkin tidak perlu terlalu dalam menggali topik ini).
