SlideShare a Scribd company logo
pseudo-class
CSS
http://www.w3schools.com/css/css_pseudo_classes.asp
kelas semu yang dimiliki oleh sebuah
elemen HTML, yang membuat kita
dapat mendefinisikan style pada
“keadaan tertentu” dari elemen tersebut.
“
pseudo-class yang berhubungan dengan link
:link
style default pada sebuah link (a yang memiliki href)
:hover
style ketika kursor mouse berada diatas sebuah link / elemen
:active
style ketika sebuah link di-klik (keadaan aktif)
:visited
style ketika sebuah link sudah pernah dikunjungi sebelumnya
(menggunakan browser yang sama)
pseudo-class yang berhubungan dengan posisi elemen (1)
:first-child
memilih elemen pertama dari sebuah parent (elemen pembungkusnya)
:last-child
memilih elemen terakhir dari sebuah parent (elemen pembungkusnya)
:nth-child(n)
memilih elemen ke-n dari sebuah parent (elemen pembungkusnya).
n bisa berarti urutan (1), (2), … atau pola (2n), (3n+2), (4n-1) atau
ganjil dan genap (even) & (odd)
pseudo-class yang berhubungan dengan posisi elemen (2)
:first-of-type
memilih elemen pertama dari sebuah jenis / tipe tag
:last-of-type
memilih elemen terakhir dari sebuah jenis / tipe tag
channel YouTube :
webProgrammingUNPAS
salamat po.
sandhikagalih@unpas.ac.id

More Related Content

What's hot

CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
Sandhika Galih
 
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & OverflowCSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
Sandhika Galih
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
Sandhika Galih
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
Sandhika Galih
 
CSS Dasar #1 : Intro
CSS Dasar #1 : IntroCSS Dasar #1 : Intro
CSS Dasar #1 : Intro
Sandhika Galih
 
CSS Layouting #1 : Display
CSS Layouting #1 : DisplayCSS Layouting #1 : Display
CSS Layouting #1 : Display
Sandhika Galih
 
HTML Dasar : #5 Heading
HTML Dasar : #5 HeadingHTML Dasar : #5 Heading
HTML Dasar : #5 Heading
Sandhika Galih
 
HTML Dasar : #9 Tabel
HTML Dasar : #9 TabelHTML Dasar : #9 Tabel
HTML Dasar : #9 Tabel
Sandhika Galih
 
HTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkHTML Dasar : #7 Hyperlink
HTML Dasar : #7 Hyperlink
Sandhika Galih
 
Pendahuluan Kuliah Pemrograman Web 1
Pendahuluan Kuliah Pemrograman Web 1Pendahuluan Kuliah Pemrograman Web 1
Pendahuluan Kuliah Pemrograman Web 1
Sandhika Galih
 
HTML Dasar : #3 Tags
HTML Dasar : #3 TagsHTML Dasar : #3 Tags
HTML Dasar : #3 Tags
Sandhika Galih
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
Sandhika Galih
 
HTML Dasar : #8 Image
HTML Dasar : #8 ImageHTML Dasar : #8 Image
HTML Dasar : #8 Image
Sandhika Galih
 
HTML Dasar : #1 Pendahuluan
HTML Dasar : #1 PendahuluanHTML Dasar : #1 Pendahuluan
HTML Dasar : #1 Pendahuluan
Sandhika Galih
 
HTML Dasar : #10 Form
HTML Dasar : #10 FormHTML Dasar : #10 Form
HTML Dasar : #10 Form
Sandhika Galih
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
Sandhika Galih
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
Sandhika Galih
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
Yaowaluck Promdee
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Html forms
Html formsHtml forms

What's hot (20)

CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
CSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & OverflowCSS Layouting #2 : Dimensi & Overflow
CSS Layouting #2 : Dimensi & Overflow
 
CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
CSS Dasar #1 : Intro
CSS Dasar #1 : IntroCSS Dasar #1 : Intro
CSS Dasar #1 : Intro
 
CSS Layouting #1 : Display
CSS Layouting #1 : DisplayCSS Layouting #1 : Display
CSS Layouting #1 : Display
 
HTML Dasar : #5 Heading
HTML Dasar : #5 HeadingHTML Dasar : #5 Heading
HTML Dasar : #5 Heading
 
HTML Dasar : #9 Tabel
HTML Dasar : #9 TabelHTML Dasar : #9 Tabel
HTML Dasar : #9 Tabel
 
HTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkHTML Dasar : #7 Hyperlink
HTML Dasar : #7 Hyperlink
 
Pendahuluan Kuliah Pemrograman Web 1
Pendahuluan Kuliah Pemrograman Web 1Pendahuluan Kuliah Pemrograman Web 1
Pendahuluan Kuliah Pemrograman Web 1
 
HTML Dasar : #3 Tags
HTML Dasar : #3 TagsHTML Dasar : #3 Tags
HTML Dasar : #3 Tags
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
HTML Dasar : #8 Image
HTML Dasar : #8 ImageHTML Dasar : #8 Image
HTML Dasar : #8 Image
 
HTML Dasar : #1 Pendahuluan
HTML Dasar : #1 PendahuluanHTML Dasar : #1 Pendahuluan
HTML Dasar : #1 Pendahuluan
 
HTML Dasar : #10 Form
HTML Dasar : #10 FormHTML Dasar : #10 Form
HTML Dasar : #10 Form
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
 
Style and Selector
Style and SelectorStyle and Selector
Style and Selector
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Html forms
Html formsHtml forms
Html forms
 

Recently uploaded

PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdfPETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
Hernowo Subiantoro
 
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdfLaporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
UmyHasna1
 
Koneksi Antar Materi Modul 1.4.ppt x
Koneksi Antar Materi Modul 1.4.ppt           xKoneksi Antar Materi Modul 1.4.ppt           x
Koneksi Antar Materi Modul 1.4.ppt x
johan199969
 
PPT Aksi Nyata Diseminasi Modul 1.4.pptx
PPT Aksi Nyata Diseminasi Modul 1.4.pptxPPT Aksi Nyata Diseminasi Modul 1.4.pptx
PPT Aksi Nyata Diseminasi Modul 1.4.pptx
Kurnia Fajar
 
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.pptKOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
Dedi Dwitagama
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
rohman85
 
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum MerdekaModul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Fathan Emran
 
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum MerdekaModul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Fathan Emran
 
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
agusmulyadi08
 
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERILAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
PURWANTOSDNWATES2
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
NurSriWidyastuti1
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
gloriosaesy
 
Laporan wakil kepala sekolah bagian Kurikulum.pdf
Laporan wakil kepala sekolah bagian Kurikulum.pdfLaporan wakil kepala sekolah bagian Kurikulum.pdf
Laporan wakil kepala sekolah bagian Kurikulum.pdf
yuniarmadyawati361
 
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptxPRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
muhammadyudiyanto55
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
nawasenamerta
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
safitriana935
 
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptxSOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
astridamalia20
 
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
AgusRahmat39
 
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdfMATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
ssuser289c2f1
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
muhammadRifai732845
 

Recently uploaded (20)

PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdfPETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
PETUNJUK TEKNIS PPDB JATIM 2024-sign.pdf
 
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdfLaporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
Laporan Kegiatan Pramuka Tugas Tambahan PMM.pdf
 
Koneksi Antar Materi Modul 1.4.ppt x
Koneksi Antar Materi Modul 1.4.ppt           xKoneksi Antar Materi Modul 1.4.ppt           x
Koneksi Antar Materi Modul 1.4.ppt x
 
PPT Aksi Nyata Diseminasi Modul 1.4.pptx
PPT Aksi Nyata Diseminasi Modul 1.4.pptxPPT Aksi Nyata Diseminasi Modul 1.4.pptx
PPT Aksi Nyata Diseminasi Modul 1.4.pptx
 
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.pptKOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
KOMITMEN MENULIS DI BLOG KBMN PB PGRI.ppt
 
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrinPatofisiologi Sistem Endokrin hormon pada sistem endokrin
Patofisiologi Sistem Endokrin hormon pada sistem endokrin
 
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum MerdekaModul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
Modul Ajar Bahasa Inggris Kelas 5 Fase C Kurikulum Merdeka
 
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum MerdekaModul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
Modul Ajar PAI dan Budi Pekerti Kelas 2 Fase A Kurikulum Merdeka
 
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
PI 2 - Ratna Haryanti, S. Pd..pptx Visi misi dan prakarsa perubahan pendidika...
 
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERILAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
LAPORAN EKSTRAKURIKULER SEKOLAH DASAR NEGERI
 
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdfINDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
INDIKATOR KINERJA DAN FOKUS PERILAKU KS.pdf
 
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBIVISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
VISI MISI KOMUNITAS BELAJAR SDN 93 KOTA JAMBI
 
Laporan wakil kepala sekolah bagian Kurikulum.pdf
Laporan wakil kepala sekolah bagian Kurikulum.pdfLaporan wakil kepala sekolah bagian Kurikulum.pdf
Laporan wakil kepala sekolah bagian Kurikulum.pdf
 
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptxPRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
PRESENTASI OBSERVASI PENGELOLAAN KINERJA KEPALA SEKOLAH.pptx
 
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptxBab 3 Sejarah Kerajaan Hindu-Buddha.pptx
Bab 3 Sejarah Kerajaan Hindu-Buddha.pptx
 
PPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdfPPT Observasi Praktik Kinerja PMM SD pdf
PPT Observasi Praktik Kinerja PMM SD pdf
 
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptxSOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
SOSIALISASI PPDB TAHUN AJARAN 2024-2025.pptx
 
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
 
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdfMATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
MATERI SOSIALISASI PPDB JABAR- 4PAN052024.pdf
 
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdfTugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
Tugas Mandiri 1.4.a.4.3 Keyakinan Kelas.pdf
 

CSS Dasar #8 : Pseudo-class