0:01 Hai selamat datang kembali yang akan
0:03 kita bahas dalam video kali ini adalah
0:05 mengenai sesuatu yang disebut dengan CSS
0:08 sudol ya Jadi sudo ini kalau misalkan
0:11 kita lihat dari definisinya e katanya
0:14 begini sudolass adalah sebuah kelas semu
0:17 ya yang dimiliki oleh sebuah elemen
0:20 html yang nantinya membuat kita dapat
0:23 mendefinisikan style pada elemen tadi ya
0:27 Tapi pada keadaan tertentu dari tersebut
0:30 ya Kenapa disebut kelas semu karena
0:33 sebetulnya kelasnya ada ya cuman dia
0:35 hanya aktif ketika keadaan tertentu aja
0:38 ya nanti contohnya e kita lihat langsung
0:41 deh ya
0:42 Eh sudo Clas ini terbagi menjadi
0:45 beberapa eh tipe ya tipe yang pertama
0:48 itu yang ini po ya kalian bisa lihat
0:51 sudol eh yang berhubungan dengan link ya
0:56 mungkin kalian pernah melihat sebuah
0:57 link begitu kalian bikin misalkan a harf
1:00 apa gitu ya Nah otomatis warnanya kan
1:03 beda dengan warna yang lainnya warnanya
1:05 biru sendiri ya terus Mungkin kalian e
1:08 pernah merhatikan kalau misalkan kalian
1:10 sudah pernah ngeklik linknya itu
1:12 warnanya berubah enggak biru lagi tapi
1:14 jadi Ungu misalnya ya Nah itu gara-gara
1:17 sudo Clas ini jadi ada empat ya yang
1:20 pertama itu Link ini keadaan default aja
1:23 jadi linknya enggak kalian apa-apain
1:25 enggak diklik ee atau enggak di-hover
1:29 itu warnanya nya default aja atau biru
1:31 gitu ya defaultnya Terus yang kedua ada
1:34 hover kelas ini atau sudo classas ini
1:38 aktif ketika kalian sorot elemennya
1:41 menggunakan Mouse atau kalian Mouse over
1:43 kalian tempatkan mous-nya di atas
1:45 elemennya lalu styleennya aktif yang
1:48 ketiga ada aktif Nah itu ketika kalian
1:51 klik ya mau pakai Mouse diklik mau pakai
1:54 trackpad diklik ya itu adalah keadaannya
1:57 aktif dan yang terakhir visited ini
2:00 ketika linknya sudah pernah kalian
2:02 kunjungi sebelumnya ya itu yang tadi
2:04 saya bilang warnanya defaultnya berubah
2:06 jadi Ungu ya kita lihat
2:09 contohnya ya seperti biasa saya sudah
2:11 buatkan kode pen isinya begini aja
2:14 sederhana jadi ada satu buah link di
2:17 luar seperti
2:19 ini saya beri kelas hello tulisannya
2:22 hello world hasilnya kalian bisa lihat
2:24 sebelah kanan lalu ada Ul yang berisi 10
2:27 buah link ya ir ada dua buah paragraf ya
2:32 nanti untuk yang Ul dan paragrafnya
2:34 abaikan dulu aja kita akan lihat untuk
2:36 yang yang pertama dulu yang Hello ini ya
2:39 ya Coba kalian lihat di sebelah kanan
2:41 ini warna defaultnya kita belum kasih
2:43 CSS apapun warna defaultnya adalah biru
2:46 terang ya Tapi ketika kalian klik lihat
2:50 yang terjadi ya ini E saya Arahkan
2:52 mousnya di sini lalu saya klik dan saya
2:53 tahan lihat warnanya berubah menjadi
2:56 merah terang ya Nah ini keadaan aktif
3:00 itu
3:01 eh dijalankan ya lalu Ketika saya lepas
3:04 mouse- Ini masih saya tekan Ketika saya
3:06 lepas mouse-nya kalian bisa lihat
3:09 warnanya semua berubah menjadi Ungu
3:11 enggak hanya yang pertama aja
3:13 kenapa ya karena semuanya mengarah ke
3:17 tempat yang sama ya yaitu Cres tidak
3:19 mengarah ke mana-mana sebetulnya ya jadi
3:22 semua link ini mengarah ke HF yang sama
3:26 jadi ketika saya klik semuanya sudah
3:28 pernah dikunjungi ya jadi seperti itu
3:30 bisa Refresh dulu supaya e linknya
3:34 kembali lagi menjadi warna
3:38 biru Sekarang kita akan coba kasih style
3:42 yang pertama kita bisa kasih style link
3:45 ya jadi saya panggil dulu kelasnya
3:47 Hello lalu saya kasih titik du link ya
3:51 cara menjalankan sudo clelas tuh kasih
3:52 titik dua lalu sudo clnya apa kita kasih
3:55 color misalnya orange
4:00 maka warnanya berubah jadi orange J
4:02 sebetulnya kalau gak kalian kasih link
4:04 juga sama aja ya di keadaan default itu
4:07 kalau
4:08 E kalian bisa kasih titik du link atau
4:11 tidak titik du link ini akan bekerja
4:13 ketika elemennya link atau a
4:18 oke itu yang pertama warnanya orange
4:21 sekarang ketika yang kedua adalah
4:23 keadaan hover kalian tulis ulang e
4:27 elemennya hell Lal lalu titik dua
4:32 hold misalnya saya mau ganti eh
4:35 tulisannya jadi
4:39 area lalu ukurannya saya
4:45 perbesar gitu ya kalau kalian lihat
4:49 tidak terjadi apa-apa karena saya
4:50 Simpannya di kelas semu hover atau
4:53 sudodo clelas hover Jadi ini akan
4:55 dipanggil Ketika saya Arahkan mouse-nya
4:58 ke sini ya kalian bisa lihat
5:00 ukurannya jadi tambah besar fontnya
5:02 berubah jadi aral
5:04 ya atau kalau warnanya mau diganti juga
5:07 boleh kita kasih aja
5:10 color green gitu ya Jadi sekarang
5:13 warnanya betul-betul berubah warnanya
5:15 berubah hurufnya berubah ukurannya
5:18 berubah ya yang ketiga itu kita bisa
5:21 kasih
5:23 Hello aktif ini ketika kalian klik atau
5:27 linknya aktif
5:30 misalnya buat dia miring font
5:33 style
5:38 talik sekarang kita lihat di hover jadi
5:42 besar warna hijau diklik jadi cetak
5:45 miring ya Sekarang kita coba untuk yang
5:48 visited kita ganti
5:51 Hello visited kita ganti warnanya jadi
5:56 merah kalian bisa lihat sekarang
5:58 warnanya berubah jadi merah Nah karena
6:00 saya sudah pernah mengunjungi link ini
6:03 oke itu tadi Bagaimana cara menggunakan
6:06 sudolas tipe yang pertama yaitu tipe
6:08 yang eh yang aktif berdasarkan link ya
6:13 yang berhubungan dengan link sekarang
6:16 sudo Clas yang kedua nah ini sudo Clas
6:19 yang kedua nah ini cukup menarik karena
6:21 ini rasanya baru ada di css3 ya Jadi ini
6:25 berhubungan dengan posisi atau urutan
6:27 dari elemen ya
6:30 ada yang first Child Lalu ada Last Child
6:33 Lalu
6:34 ada Child ya
6:36 Child atau Child ke n nah ini yang harus
6:39 kalian perhatikan ini hanya akan aktif
6:42 ketika elemennya merupakan Child dari eh
6:46 elemen lain ya nanti kita lihat The
6:50 First Child Last Child dan
6:51 Child nah ini hanya akan aktif ketika
6:54 elemennya merupakan Child dari elemen
6:57 yang lain contohnya yang ini saya punya
6:59 Ul di dalamnya ada
7:01 Li Nah jadi saya bisa bilang Li ini
7:05 adalah Child dari Ul ya jadi Ul ini
7:09 orang tuanya Li ini adalah anaknya jadi
7:12 kalau saya tanya Ada berapa anak dari Ul
7:15 anaknya ada
7:17 10 ya J anaknya ada 10 nah a ini
7:20 merupakan anak dari li jadi kalau saya
7:24 tanya Ada berapa anak dari li harusnya
7:27 jawabannya satu ya karena ini tiap-tiap
7:30 Li hanya punya satu anak sedangkan Ul
7:33 anaknya ada 10 nah itu kalian harus
7:36 paham dulu konsep eh parent Child
7:39 seperti itu karena ini akan kepakai
7:42 eh Sampai Nanti kalian belajar
7:44 javascript ya oke lepas dari itu kita
7:47 coba
7:49 langsung jadi ini saya tulisnya begini
7:52 kalau saya tulis
7:55 Li ya lalu saya tulis first Child
8:02 ya jadi CSS Tolong carikan saya
8:06 li tapi yang merupakan anak
8:09 pertama lalu a di dalamnya kita ganti
8:13 warnanya jadi
8:16 [Musik]
8:18 hijau Nah maka Link yang pertama akan
8:21 hijau ya Kalau saya tidak menggunakan a
8:25 maka tidak akan berubah ya karena yang
8:29 harus yang berubah adalah
8:31 a ya Jadi ini bacanya sekali lagi CSS
8:35 Tolong carikan saya a yang ada di dalam
8:38 Li yang merupakan anak pertama gu
8:42 ya lalu kalau saya ganti first child-nya
8:45 jadi last CH maka yang ke-10 J nanti
8:48 enggak enggak peduli ada berapa Link
8:50 yang kalian punya yang terakhir akan
8:53 berubah dan yang ketiga nah ini yang
8:55 paling menarik adalah and
8:59 kalau kalian gunakan
9:00 Child ini kalian akan mentarget
9:03 e anak spesifik gitu urutan yang ke
9:06 berapa sehingga kalau kalian pakai
9:09 harus dikasih
9:10 parameter parameter macam-macam bisa
9:13 urutannya langsung misalkan saya tulis
9:15 ttig ini artinya anak ketiganya langsung
9:18 berubah menjadi hijau saya ganti Li maka
9:22 anak kelimanya berubah ya Atau saya mau
9:27 ganti
9:28 dia kelipatan dua ni kalian bisa lihat
9:32 tiap kelipatan dua warnanya berubah ya
9:36 atau kelipatan 3 di mulai dari 3 6 9
9:42 kalau ada 12 nanti
9:44 12 ya Jadi bisa urutan yang ke berapa
9:46 atau bisa kelipatan yang ke berapa atau
9:49 Misalkan begini Saya pengin kelipatan
9:51 tig tapi mulainya dari sat ya jadi
9:56 caranya gini kelipatan 3 kan mulainya
9:57 dari sini ya kalau saya tulis 3M berarti
9:59 di sini kalau ingin kelipatan
10:02 mulai kalau ingin kelipatan 3 tapi
10:04 mulainya dari 1 kalian Hitung dari
10:07 keadaan awalnya misalkan di sini berarti
10:09 ke satu mundur berapa 1 2 ya -2 kalian
10:14 tinggal tulis
10:16 min2 mulai dari 1 Nah setelah 1 berapa 4
10:21 kan 4 7 Nah kalau kalian lihat 4 itu
10:26 sebetulnya plus 1 dari keadaan default
10:28 ya kan ya Jadi kalau 3N - 2 itu sama aja
10:32 dengan 3N + 1 3N itu dari sini + 1 mulai
10:37 dari
10:38 sini ya Jadi ini cara menggunakan
10:41 Eh parameternya bisa
10:45 angka bisa kelipatan ke berapa lalu bisa
10:48 kalian tambahkan minus atau plus untuk
10:51 menentukan mau mulai dari
10:53 mana ya itu cara menggunakan first Child
10:57 Last Child dan
10:59 Child
11:00 oke nah ada juga kalian bisa
11:04 gunakan event
11:07 untuk genap lalu
11:11 OD Untuk
11:14 gaji ya Jadi untuk yang ganjil warnanya
11:17 hijau seperti ini
11:23 Oke Paham ya atau Kalian juga bisa
11:25 tambahkan begini misalkan eh
11:29 CSS Tolong carikan saya a yang ada di
11:32 dalam Li yang ganjil gitu ya saya bisa
11:36 Tuliskan juga begini
11:40 le Child
11:44 on a tapi sekarang pada saat saya hover
11:48 gu ya warnanya
11:53 berubah jadi
11:56 merah ya Jadi sekarang tadinya hijau
12:01 pada saat saya hover berubah jadi merah
12:03 tapi khusus yang ganjil
12:06 aja ya yang genap Saya sorotak ber GJ
12:12 ber kalau mau ganti jadi yang genap ya
12:14 tinggal ganti
12:21 jadi dia ber ini kepakai misalkan Kalian
12:25 mau bikin tabel terusaptiap barisnya nya
12:29 belang gitu ya merah putih merah putih
12:31 merah putih misalkan nanti kalian
12:33 gunakan yang ini
12:36 oke itu untuk yang eh first Child Last
12:39 Child dan end Child ini kalau elemennya
12:43 merupakan Child dari eh elemen lain
12:47 misalkan untuk yang paragraf nih Saya
12:49 punya dua buah paragraf kalau saya
12:52 pengin paragraf satu berubah jadi merah
12:54 paragraf kedua berubah jadi
12:57 hijau saya enggak bisa pakai ver
13:06 Child yaak berubah ya karena P ini bukan
13:10 anak dari elemen lain enggak ada
13:13 tuh nah kalau pengin mentarget si P ini
13:17 kita pakai sudo Clas yang lain yang
13:20 namanya first of type atau Last of time
13:23 ya Jadi ini elemen yang pertama kali
13:26 ketemuah ya dan elemen yang terakhir
13:29 Akir lihat Kalau ganti first
13:34 of
13:36 makah P pertama warnanya akan berubah
13:40 menjadi merah kalau saya ganti l Of type
13:44 ini P terakhir
13:47 Oke jadi itu e cara penggunaan sudok
13:51 clelas sebetulnya masih ada yang lain
13:52 yang penggunaannya juga cukup penting ya
13:54 cuman itu enggak enggak saya jelaskan
13:55 dulu ee di video kali ini Mungkin saya
13:58 akan bisa jelaskan di video
14:01 berikutnya oke itu mungkin ee penjelasan
14:04 mengenai sudoklas mudah-mudahan Kalian
14:06 paham kalau ada pertanyaan silakan
14:07 langsung diajukan aja eh lewat komentar
14:10 di video youtube-nya atau kalian bisa
14:13 layangkan email ke andikagali
14:17 @unpas.ac.id Oke nanti kita balas eh
14:20 setiap pertanyaannya ya jangan lupa
14:22 kunjungi channel web programming Unpas
14:24 Lihat videonya share ke teman-temannya
14:26 lalu eh
14:29 like dan subscribe Oke sampai ketemu
14:31 lagi di video berikutnya
14:33 [Musik]
Chrome Extension