Pseudo-kelas CSS

Apa itu pseudo-kelas?

Pseudo-kelas digunakan untuk mendefinisikan keadaan khusus elemen.

Contohnya, dapat digunakan untuk:

  • Atur gaya saat mouse diatas elemen
  • Atur gaya untuk tautan yang telah diakses dan belum diakses
  • Atur gaya elemen saat mendapatkan fokus
Tembuskan mouse di atas saya

Tata bahasa

Tata bahasa pseudo-kelas:

selector:pseudo-class {
  property: value;
}

Pseudo-kelas anchor

Tautan dapat ditampilkan dengan berbagai cara:

Contoh

/* Tautan yang belum diakses */
a:link {
  color: #FF0000;
}
/* Tautan yang telah diakses */
a:visited {
  color: #00FF00;
}
/* Tautan yang dihover */
a:hover {
  color: #FF00FF;
}
/* Tautan yang dipilih */
a:active {
  color: #0000FF;
}

Coba sendiri

Perhatian:a:hover Harus berada di dalam definisi CSS a:link dan a:visited sebelumnya, untuk berlaku!a:active Harus berada di dalam definisi CSS a:hover akan berlaku setelahnya! Nama pseudo-kelas tidak berhati-hati terhadap huruf besar dan kecil.

Pseudo-kelas dan kelas CSS

Pseudo-kelas dapat digunakan bersamaan dengan kelas CSS:

Ketika Anda menempatkan mouse di atas tautan di contoh ini, warna akan berubah:

Contoh

a.highlight:hover {
  color: #ff0000;
}

Coba sendiri

ketika berada di atas <div>

dengan penggunaan <div> elemen :hover Contoh pseudo-kelas:

Contoh

div:hover {
  background-color: blue;
}

Coba sendiri

Tooltip hover sederhana

Tahan mouse di atas elemen <div> untuk menampilkan elemen <p> (efek seperti tooltip):

Tahan mouse di atas saya untuk menampilkan elemen <p>.

Hoho, saya disini!

Contoh

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Coba sendiri

CSS - :first-child pseudo-kelas

:first-child Pseudo-kelas cocok dengan elemen yang ditentukan: elemen adalah anak pertama dari elemen lain.

Cocokkan elemen <p> pertama

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <p> yang menjadi anak pertama dari setiap elemen lain:

Contoh

p:first-child {
  color: blue;
}

Coba sendiri

Cocokkan semua elemen <i> di dalam semua elemen <p> pertama

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <i> yang menjadi anak pertama di dalam semua elemen <p>:

Contoh

p i:first-child {
  color: blue;
}

Coba sendiri

Cocokkan semua elemen <i> di dalam semua elemen <p> pertama

Dalam contoh di bawah ini, pemilih mencocokkan semua elemen <i> di dalam elemen <p> yang menjadi anak pertama dari elemen lain:

Contoh

p:first-child i {
  color: blue;
}

Coba sendiri

CSS - :lang pseudo-kelas

:lang pseudo-kelas memungkinkan Anda menentukan aturan khusus untuk bahasa yang berbeda.

Dalam contoh di bawah ini,:lang Tentukan tanda kutip untuk elemen <q> dengan atribut lang="en":

Contoh

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Coba sendiri

Beberapa contoh lain

Tambahkan gaya lain ke tautan
Contoh ini menunjukkan bagaimana menambahkan gaya lain ke tautan.
Gunakan :focus
Contoh ini menunjukkan bagaimana menggunakan pseudo-kelas :focus.

Semua pseudo-kelas CSS

Pemilih Contoh Deskripsi Contoh
:active a:active Pilih setiap tautan yang aktif.
:checked input:checked Pilih setiap elemen <input> yang dipilih.
:disabled input:disabled Pilih setiap elemen <input> yang dinonaktifkan.
:empty p:empty Pilih setiap elemen <p> tanpa elemen anak.
:enabled input:enabled Pilih setiap elemen <input> yang diaktifkan.
:first-child p:first-child Pilih setiap elemen <p> yang menjadi anak pertama dari anak terakhir.
:first-of-type p:first-of-type Pilih setiap elemen <p> yang menjadi anak pertama <p> dari orang tuanya.
:focus input:focus Pilih elemen <input> yang fokus.
:hover a:hover Pilih tautan yang diarahkan mouse.
:in-range input:in-range Pilih elemen <input> yang memiliki nilai dalam rentang yang ditentukan.
:invalid input:invalid Pilih semua elemen <input> yang memiliki nilai yang tidak sah.
:lang(language) p:lang(it) Pilih setiap elemen <p> yang memiliki nilai atribut lang yang mulai dengan "it".
:last-child p:last-child Pilih setiap elemen <p> yang menjadi anak terakhir dari anak terakhir.
:last-of-type p:last-of-type Pilih setiap elemen <p> yang menjadi anak terakhir <p> dari orang tuanya.
:link a:link Pilih semua tautan yang belum diakses.
:not(selector) :not(p) Pilih elemen yang bukan <p>.
:nth-child(n) p:nth-child(2) Pilih setiap elemen <p> yang menjadi anak kedua dari orang tuanya.
:nth-last-child(n) p:nth-last-child(2) Pilih setiap elemen <p> yang menjadi anak kedua dari anak terakhir, menghitung dari anak terakhir.
:nth-last-of-type(n) p:nth-last-of-type(2) Pilih setiap elemen <p> yang menjadi anak kedua <p> dari orang tuanya, menghitung dari anak terakhir.
:nth-of-type(n) p:nth-of-type(2) Pilih setiap elemen <p> yang menjadi anak kedua <p> dari orang tuanya.
:only-of-type p:only-of-type Pilih setiap elemen <p> yang menjadi elemen tunggal <p> dari orang tuanya.
:only-child p:only-child Pilih elemen <p> yang menjadi anak tunggal dari elemen orang tuanya.
:optional input:optional Pilih elemen <input> yang tidak menentukan atribut "required".
:out-of-range input:out-of-range Pilih elemen <input> yang nilai di luar rentang yang ditentukan.
:read-only input:read-only Pilih elemen <input> yang menentukan atribut "readonly".
:read-write input:read-write Pilih elemen <input> yang tidak menentukan atribut "readonly".
:required input:required Pilih elemen <input> yang menentukan atribut "required".
:root root Pilih elemen root dari elemen.
:target #news:target Pilih elemen #news yang aktif saat ini (klik URL yang mengandung nama tautan ini).
:valid input:valid Pilih semua elemen <input> yang memiliki nilai yang berlaku.
:visited a:visited Pilih semua tautan yang telah diakses.

Semua Element Pseudo di CSS

Pemilih Contoh Deskripsi Contoh
::after p::after Masukkan konten setelah setiap elemen <p>.
::before p::before Masukkan konten sebelum setiap elemen <p>.
::first-letter p::first-letter Pilih huruf pertama tiap elemen <p>.
::first-line p::first-line Pilih baris pertama tiap elemen <p>.
::selection p::selection Pilih bagian elemen yang dipilih pengguna.