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
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]
Share:
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
How It Works
Copy YouTube Link
Grab any YouTube video URL from your browser
Paste & Extract
Paste the URL and we'll fetch the transcript
Use the Text
Search, copy, or save the transcript
Why you need YouTube Transcript?
Extract value from videos without watching every second - save time and work smarter
YouTube videos contain valuable information for learning and entertainment, but watching entire videos is time-consuming. This transcript tool helps you quickly access, search, and repurpose video content in text format.
For Note Takers
- Copy text directly into your study notes
- Get podcast transcripts for better retention
- Translate content to your native language
For Content Creators
- Create blog posts from video content
- Extract quotes for social media posts
- Add SEO-rich descriptions to videos
With AI Tools
- Generate concise summaries instantly
- Create quiz questions from content
- Extract key information automatically
Creative Ways to Use YouTube Transcripts
For Learning & Research
- Generate study guides from educational videos
- Extract key points from lectures and tutorials
- Ask AI tools specific questions about video content
For Content Creation
- Create engaging infographics from video content
- Extract quotes for newsletters and email campaigns
- Create shareable memes using memorable quotes
Power Up with AI Integration
Combine YouTube transcripts with AI tools like ChatGPT for powerful content analysis and creation:
Frequently Asked Questions
Is this tool really free?
Yes! YouTubeToText is completely free. No hidden fees, no registration needed, and no credit card required.
Can I translate the transcript to other languages?
Absolutely! You can translate subtitles to over 125 languages. After generating the transcript, simply select your desired language from the options.
Is there a limit to video length?
Nope, you can transcribe videos of any length - from short clips to multi-hour lectures.
How do I use the transcript with AI tools?
Simply use the one-click copy button to copy the transcript, then paste it into ChatGPT or your favorite AI tool. Ask the AI to summarize content, extract key points, or create notes.
Timestamp Navigation
Soon you'll be able to click any part of the transcript to jump to that exact moment in the video.
Have a feature suggestion? Let me know!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.