Selasa, 11 April 2017

Belajar CSS Dasar Bagian 8 – Pseudo class

  Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 7 – Selector css Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 8 – Pseudo class

  Hallo semua teman – teman sahabat lupacode selamat datang kembali di blog lupacode.blogspot.com pada kesempatan kali ini kita akan masih dalam pembahasan materi seputas css yaitu kita akan belajar tentang pseudo class.
Pseudo class  ini kalau kita lihat dari definisi nya yaitu
“ Kelas semu yang dimiliki oleh sebuah elemen HTML, yang membuat kita dapat mendefinisikan style pada “keadaan tertentu” dari elemen tersebut”.
     
       Kenapa disebut class semu ? Sebetulnya class ini ada, namun hanya aktif ketika pada keadaan tertentu. Nanti contohnya kita praktekan saja agar tidak bingung. Pseudo class ini terbagi menjadi beberapa tipe, type yang pertama adalah
Pesudo class yang berhubungan dengan link

: link
Style default pada sebuah link ( a yang memiliki href )
: hover
Style ketika kursor muose berada diatas sebuah link / elemen
:  active
Style ketika sebuah link di klik ( keadaan aktif )
: visited
Style ketika sebuah link pernah dikunjungi sebelumnya ( Menggunakan browser yang sama )

       Oke baiklah kita langsung saja lihat contoh nya. Seperti biasa saya sudah buat file html terlebih dahulu dan didalamnya ada a link, dan dua buah paragraf. Seperti ini syntax nya

<!DOCTYPE html>
<html>
<head>
             <title>Selector CSS</title>
             <link rel="stylesheet" type="text/css" href="style.css">
             </style>
</head>
<body>

<a href="#" class="hello">Hello World</a>
            
             <ul>
                             <li><a href="#">Link 1</a></li>
                             <li><a href="#">Link 2</a></li>
                             <li><a href="#">Link 3</a></li>
                             <li><a href="#">Link 4</a></li>
                             <li><a href="#">Link 5</a></li>                
                             <li><a href="#">Link 6</a></li>
                             <li><a href="#">Link 7</a></li>
                             <li><a href="#">Link 8</a></li>
                             <li><a href="#">Link 9</a></li>
                             <li><a href="#">Link 10</a></li>
             </ul>

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

<p class="p2">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

   Jika kita lihat hasilnya adalah seperti ini

Belajar CSS Dasar Bagian 8 – Pseudo class 1

        Sekarang kita kebagian yang a link “hello word” dulu. Kalian bisa lihat pada gambar di atas, kita belum kasih css apapun dan warna default untuk a link adalah warna biru terang. Lalu ketika saya klik dan tahan pada tulisan Hello Word maka warna nya akan berubah menjadi merah terang seperti ini

Belajar CSS Dasar Bagian 8 – Pseudo class 2

    Nah dan ini adalah keadaan aktif ketika dijalankan. Dan ketika saya lepas mousenya sekarang warna nya akan berubah menjadi ungu.

Belajar CSS Dasar Bagian 8 – Pseudo class 3

    Kenapa semuanya berubah menjadi ungu ? karna href nya semuanya mengarah ke tempat yang sama yaitu kres # . jadi semua link ini mengarah ke tempat yang sama, seolah – olah semua link nya sudah pernah saya kunjungi. Oke bak sekarang kita akan coba kasih style pada css nya dan kita gunakan pseuda class yang akan kita pelajari. Misalnya saya menuliskan pada css nya seperti ini :

.hello {
             color: orange;
}

.hello:hover {
             font-family: arial;
             font-size: 20px;                               
}

      Kalau kita lihat memang tidak akan terjadi apa-apa, hanya kata Hello Word saja yang berubah menjadi orange. Tetapi ketika saya letakan kursor mouse pada link Hello Word itu, maka tulisan nya akan berbah menjadi tambah besar dan fontnya menjadi arial ( hover ) seperti ini

Belajar CSS Dasar Bagian 8 – Pseudo class 4

      Kalau kita ingin merubah warnanya juga bisa, tnggal menambahkan saja seperti ini

.hello:hover {
             Color: green;
             font-family: arial;
             font-size: 20px;                               
}

    Sekarang yang ketiga, kita tambahkan lagi pada css nya seperti ini

.hello:active {
                             font-style: italic;
}

.hello:visited {
             color: blue;
}

     Dan kalian bisa lihat perbedaan nya, warna nya akan berubah menjadi biru, dan ketika jika di klik maka font nya akan menjadi italic atau cetak miring. Gimana mudah bukan ? kalian bisa oprek – oprek sendiri agar kalian dapat lebih paham lagi teman – teman.

Oke baklah Sekarang type pseudo class yang ke-dua yaitu :
Pseudo class yang berhubungan dengan posisi elemen

: 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)

       Nah ini yang cukup menarik, dan ini baru bisa hanya di css 3. Jadi ini berhubungan dengan posisi atau urutan dari elemen. Ini yang harus kalian perhatikan, elemen nya hanya akan aktif ketika elemennya merupakan child dari elemen lain.  Contohnya begini
    Pada file html saya punya sebuah <ul> dan didalam nya ada <li> nah <li> ini bisa disebut child dari <ul> jadi, <ul> ini adalah orang tua, sedangkan <li> ini adalah anaknya. Jadi kalau saya tanya ada berapa anaknya dari <ul> anaknya ada 10. Dan bisa kalian lihat pada script html saya diatas. Nah sedangkan <a> ini merupakan anak dari <li> dan anak dari <li> itu ada satu. Tiap – tiap <li> mempunyai anak satu sedangkan <ul> anaknya ada 10. Nah itu kalian harus paham dulu konsep parent child seperti itu, karna ini akan kepake sampai nanti kalian beajar javascript.
Oke sekarang kita akan coba langsung, perhatikan cara menulisnya adalah seperti ini
li:first-child a {
             color: green;
}

     Jadi cara membacanya adalah begini, css tolong carikan saya anak pertama dari <li> dan rubah warna nya menjadi hijau. Maka hasilnya link pertama akan berubah menjadi hijau,  seperti ini
Belajar CSS Dasar Bagian 8 – Pseudo class 5

     Kalau saya hilangkan a nya, maka tidak akan berubah, karna yang seharusnya berubah itu a didalamnya. Lalu jika saya ganti li:first-child nya menjadi li:last-child maka link yang terakhir yang akan berubah warnanya. Jadi mau link nya ada berapa tetep yang akan berubah adalah link yang terakhir itu. Kemudian dan yang ketiga adalah nth-child (n) . kalau kalian menggunakan nth-child maka kalian akan mentarget anak yang spesifik, urutan yang keberapa. Sehingga kalau kalian pakai nth-child harus dikasih parameter.
      Parameter itu macam-macam, jika saya menuliskan nya secara langsung link:nth-child(3) maka anak ketiga nya akan berubah menjadi hijau seperti ini

Belajar CSS Dasar Bagian 8 – Pseudo class 6
      Jika kalian tuliskan (6) maka anak ke-enamnya akan berubah menjadi hijau. Atau saya mau ganti dia kelipatan dua link:nth-child(2n) kalian bisa lihat hasilnya

Belajar CSS Dasar Bagian 8 – Pseudo class 7

       Setiap kelipatan dua warnanya akan berubah, atau kalian juga bisa coba kelipatan 3 (3n) maka setiap kelipatan 3 dia akan berubah menjadi hijau. Atau begini, jika saya ingin kelipatan 3 tapi mulainya dari satu. Kita hitung dari keadaan awalnya, kelipatan 3 berada pada baris ke 3, jika saya ingin memulai nya dari baris pertama maka kita hitung mundur . maka hasilnya adalah -2 .kalau saya ingin mulainya dari baris ke 5 maka berarti hitung maju, menjadi +2.
Jadi menuliskannya seperti ini

li:nth-child(3n-2) a {
             color: green;
}

    Maka hasilnya dapat kalian lihat, dia akan mulai dari baris pertama. Seperti ini

Belajar CSS Dasar Bagian 8 – Pseudo class 8

     Jadi ini cara menggunakan parameternya, bisa angka, bisa kelipatan ke-berapa, lalu bisa juga ditambahkan Plus (+) Minus (-) nya untuk kalian menentukan dari mana mulainya. Ada juga kalian bisa gunakan even untuk genap li:nth-child(even) a lalu odd untuk ganjil li:nth-child(odd) a kalian bisa coba-coba sendiri yah terserah mau pake yang mana disesuaikan dengan kebutuhan saja.
    Baiklah saya rasa cukup sampai sini dulu untuk pembahasan materi mengenai pseudo css ini. Selanjutnya kita akan membahas mengenai Belajar CSS Dasar Bagian 9 – Inheritance

Pelajari Juga Materi Sebelumnya :

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon