YouTube Transcript:
CSS Dasar - 8 - Pseudo Class
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
View:
Hai selamat datang kembali yang akan
kita bahas dalam video kali ini adalah
mengenai sesuatu yang disebut dengan CSS
sudol ya Jadi sudo ini kalau misalkan
kita lihat dari definisinya e katanya
begini sudolass adalah sebuah kelas semu
ya yang dimiliki oleh sebuah elemen
html yang nantinya membuat kita dapat
mendefinisikan style pada elemen tadi ya
Tapi pada keadaan tertentu dari tersebut
ya Kenapa disebut kelas semu karena
sebetulnya kelasnya ada ya cuman dia
hanya aktif ketika keadaan tertentu aja
ya nanti contohnya e kita lihat langsung
deh ya
Eh sudo Clas ini terbagi menjadi
beberapa eh tipe ya tipe yang pertama
itu yang ini po ya kalian bisa lihat
sudol eh yang berhubungan dengan link ya
mungkin kalian pernah melihat sebuah
link begitu kalian bikin misalkan a harf
apa gitu ya Nah otomatis warnanya kan
beda dengan warna yang lainnya warnanya
biru sendiri ya terus Mungkin kalian e
pernah merhatikan kalau misalkan kalian
sudah pernah ngeklik linknya itu
warnanya berubah enggak biru lagi tapi
jadi Ungu misalnya ya Nah itu gara-gara
sudo Clas ini jadi ada empat ya yang
pertama itu Link ini keadaan default aja
jadi linknya enggak kalian apa-apain
enggak diklik ee atau enggak di-hover
itu warnanya nya default aja atau biru
gitu ya defaultnya Terus yang kedua ada
hover kelas ini atau sudo classas ini
aktif ketika kalian sorot elemennya
menggunakan Mouse atau kalian Mouse over
kalian tempatkan mous-nya di atas
elemennya lalu styleennya aktif yang
ketiga ada aktif Nah itu ketika kalian
klik ya mau pakai Mouse diklik mau pakai
trackpad diklik ya itu adalah keadaannya
aktif dan yang terakhir visited ini
ketika linknya sudah pernah kalian
kunjungi sebelumnya ya itu yang tadi
saya bilang warnanya defaultnya berubah
jadi Ungu ya kita lihat
contohnya ya seperti biasa saya sudah
buatkan kode pen isinya begini aja
sederhana jadi ada satu buah link di
luar seperti
ini saya beri kelas hello tulisannya
hello world hasilnya kalian bisa lihat
sebelah kanan lalu ada Ul yang berisi 10
buah link ya ir ada dua buah paragraf ya
nanti untuk yang Ul dan paragrafnya
abaikan dulu aja kita akan lihat untuk
yang yang pertama dulu yang Hello ini ya
ya Coba kalian lihat di sebelah kanan
ini warna defaultnya kita belum kasih
CSS apapun warna defaultnya adalah biru
terang ya Tapi ketika kalian klik lihat
yang terjadi ya ini E saya Arahkan
mousnya di sini lalu saya klik dan saya
tahan lihat warnanya berubah menjadi
merah terang ya Nah ini keadaan aktif
itu
eh dijalankan ya lalu Ketika saya lepas
mouse- Ini masih saya tekan Ketika saya
lepas mouse-nya kalian bisa lihat
warnanya semua berubah menjadi Ungu
enggak hanya yang pertama aja
kenapa ya karena semuanya mengarah ke
tempat yang sama ya yaitu Cres tidak
mengarah ke mana-mana sebetulnya ya jadi
semua link ini mengarah ke HF yang sama
jadi ketika saya klik semuanya sudah
pernah dikunjungi ya jadi seperti itu
bisa Refresh dulu supaya e linknya
kembali lagi menjadi warna
biru Sekarang kita akan coba kasih style
yang pertama kita bisa kasih style link
ya jadi saya panggil dulu kelasnya
Hello lalu saya kasih titik du link ya
cara menjalankan sudo clelas tuh kasih
titik dua lalu sudo clnya apa kita kasih
color misalnya orange
maka warnanya berubah jadi orange J
sebetulnya kalau gak kalian kasih link
juga sama aja ya di keadaan default itu
kalau
E kalian bisa kasih titik du link atau
tidak titik du link ini akan bekerja
ketika elemennya link atau a
oke itu yang pertama warnanya orange
sekarang ketika yang kedua adalah
keadaan hover kalian tulis ulang e
elemennya hell Lal lalu titik dua
hold misalnya saya mau ganti eh
tulisannya jadi
area lalu ukurannya saya
perbesar gitu ya kalau kalian lihat
tidak terjadi apa-apa karena saya
Simpannya di kelas semu hover atau
sudodo clelas hover Jadi ini akan
dipanggil Ketika saya Arahkan mouse-nya
ke sini ya kalian bisa lihat
ukurannya jadi tambah besar fontnya
berubah jadi aral
ya atau kalau warnanya mau diganti juga
boleh kita kasih aja
color green gitu ya Jadi sekarang
warnanya betul-betul berubah warnanya
berubah hurufnya berubah ukurannya
berubah ya yang ketiga itu kita bisa
kasih
Hello aktif ini ketika kalian klik atau
linknya aktif
misalnya buat dia miring font
style
talik sekarang kita lihat di hover jadi
besar warna hijau diklik jadi cetak
miring ya Sekarang kita coba untuk yang
visited kita ganti
Hello visited kita ganti warnanya jadi
merah kalian bisa lihat sekarang
warnanya berubah jadi merah Nah karena
saya sudah pernah mengunjungi link ini
oke itu tadi Bagaimana cara menggunakan
sudolas tipe yang pertama yaitu tipe
yang eh yang aktif berdasarkan link ya
yang berhubungan dengan link sekarang
sudo Clas yang kedua nah ini sudo Clas
yang kedua nah ini cukup menarik karena
ini rasanya baru ada di css3 ya Jadi ini
berhubungan dengan posisi atau urutan
dari elemen ya
ada yang first Child Lalu ada Last Child
Lalu
ada Child ya
Child atau Child ke n nah ini yang harus
kalian perhatikan ini hanya akan aktif
ketika elemennya merupakan Child dari eh
elemen lain ya nanti kita lihat The
First Child Last Child dan
Child nah ini hanya akan aktif ketika
elemennya merupakan Child dari elemen
yang lain contohnya yang ini saya punya
Ul di dalamnya ada
Li Nah jadi saya bisa bilang Li ini
adalah Child dari Ul ya jadi Ul ini
orang tuanya Li ini adalah anaknya jadi
kalau saya tanya Ada berapa anak dari Ul
anaknya ada
10 ya J anaknya ada 10 nah a ini
merupakan anak dari li jadi kalau saya
tanya Ada berapa anak dari li harusnya
jawabannya satu ya karena ini tiap-tiap
Li hanya punya satu anak sedangkan Ul
anaknya ada 10 nah itu kalian harus
paham dulu konsep eh parent Child
seperti itu karena ini akan kepakai
eh Sampai Nanti kalian belajar
javascript ya oke lepas dari itu kita
coba
langsung jadi ini saya tulisnya begini
kalau saya tulis
Li ya lalu saya tulis first Child
ya jadi CSS Tolong carikan saya
li tapi yang merupakan anak
pertama lalu a di dalamnya kita ganti
warnanya jadi
[Musik]
hijau Nah maka Link yang pertama akan
hijau ya Kalau saya tidak menggunakan a
maka tidak akan berubah ya karena yang
harus yang berubah adalah
a ya Jadi ini bacanya sekali lagi CSS
Tolong carikan saya a yang ada di dalam
Li yang merupakan anak pertama gu
ya lalu kalau saya ganti first child-nya
jadi last CH maka yang ke-10 J nanti
enggak enggak peduli ada berapa Link
yang kalian punya yang terakhir akan
berubah dan yang ketiga nah ini yang
paling menarik adalah and
kalau kalian gunakan
Child ini kalian akan mentarget
e anak spesifik gitu urutan yang ke
berapa sehingga kalau kalian pakai
harus dikasih
parameter parameter macam-macam bisa
urutannya langsung misalkan saya tulis
ttig ini artinya anak ketiganya langsung
berubah menjadi hijau saya ganti Li maka
anak kelimanya berubah ya Atau saya mau
ganti
dia kelipatan dua ni kalian bisa lihat
tiap kelipatan dua warnanya berubah ya
atau kelipatan 3 di mulai dari 3 6 9
kalau ada 12 nanti
12 ya Jadi bisa urutan yang ke berapa
atau bisa kelipatan yang ke berapa atau
Misalkan begini Saya pengin kelipatan
tig tapi mulainya dari sat ya jadi
caranya gini kelipatan 3 kan mulainya
dari sini ya kalau saya tulis 3M berarti
di sini kalau ingin kelipatan
mulai kalau ingin kelipatan 3 tapi
mulainya dari 1 kalian Hitung dari
keadaan awalnya misalkan di sini berarti
ke satu mundur berapa 1 2 ya -2 kalian
tinggal tulis
min2 mulai dari 1 Nah setelah 1 berapa 4
kan 4 7 Nah kalau kalian lihat 4 itu
sebetulnya plus 1 dari keadaan default
ya kan ya Jadi kalau 3N - 2 itu sama aja
dengan 3N + 1 3N itu dari sini + 1 mulai
dari
sini ya Jadi ini cara menggunakan
Eh parameternya bisa
angka bisa kelipatan ke berapa lalu bisa
kalian tambahkan minus atau plus untuk
menentukan mau mulai dari
mana ya itu cara menggunakan first Child
Last Child dan
Child
oke nah ada juga kalian bisa
gunakan event
untuk genap lalu
OD Untuk
gaji ya Jadi untuk yang ganjil warnanya
hijau seperti ini
Oke Paham ya atau Kalian juga bisa
tambahkan begini misalkan eh
CSS Tolong carikan saya a yang ada di
dalam Li yang ganjil gitu ya saya bisa
Tuliskan juga begini
le Child
on a tapi sekarang pada saat saya hover
gu ya warnanya
berubah jadi
merah ya Jadi sekarang tadinya hijau
pada saat saya hover berubah jadi merah
tapi khusus yang ganjil
aja ya yang genap Saya sorotak ber GJ
ber kalau mau ganti jadi yang genap ya
tinggal ganti
jadi dia ber ini kepakai misalkan Kalian
mau bikin tabel terusaptiap barisnya nya
belang gitu ya merah putih merah putih
merah putih misalkan nanti kalian
gunakan yang ini
oke itu untuk yang eh first Child Last
Child dan end Child ini kalau elemennya
merupakan Child dari eh elemen lain
misalkan untuk yang paragraf nih Saya
punya dua buah paragraf kalau saya
pengin paragraf satu berubah jadi merah
paragraf kedua berubah jadi
hijau saya enggak bisa pakai ver
Child yaak berubah ya karena P ini bukan
anak dari elemen lain enggak ada
tuh nah kalau pengin mentarget si P ini
kita pakai sudo Clas yang lain yang
namanya first of type atau Last of time
ya Jadi ini elemen yang pertama kali
ketemuah ya dan elemen yang terakhir
Akir lihat Kalau ganti first
of
makah P pertama warnanya akan berubah
menjadi merah kalau saya ganti l Of type
ini P terakhir
Oke jadi itu e cara penggunaan sudok
clelas sebetulnya masih ada yang lain
yang penggunaannya juga cukup penting ya
cuman itu enggak enggak saya jelaskan
dulu ee di video kali ini Mungkin saya
akan bisa jelaskan di video
berikutnya oke itu mungkin ee penjelasan
mengenai sudoklas mudah-mudahan Kalian
paham kalau ada pertanyaan silakan
langsung diajukan aja eh lewat komentar
di video youtube-nya atau kalian bisa
layangkan email ke andikagali
@unpas.ac.id Oke nanti kita balas eh
setiap pertanyaannya ya jangan lupa
kunjungi channel web programming Unpas
Lihat videonya share ke teman-temannya
lalu eh
like dan subscribe Oke sampai ketemu
lagi di video berikutnya
[Musik]
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
Works with YouTube, Coursera, Udemy and more educational platforms
Get Instant Transcripts: Just Edit the Domain in Your Address Bar!
YouTube
←
→
↻
https://www.youtube.com/watch?v=UF8uR6Z6KLc
YoutubeToText
←
→
↻
https://youtubetotext.net/watch?v=UF8uR6Z6KLc