| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Belajar CSS Selector



Demi memenuhi permintaansobat @Zh!nTho saya putuskan untuk membuat post ini

Pasti tidak asing bagi kalian apa itu selector, saya pernah menjelaskan selector sedikit di Bab I : Perkenalan CSS tapi meskipun tidak sebanyak yang akan saya bahas sekarang.
 
Untuk mengingat kembali apa itu selector , saya akan beri contoh sedikit:

Silahkan lihat tulisan yang di beri warna merah, itu adalah contoh dari selektor :

.page-wrap{width:880px;margin:0 auto;}
#content-wrapper{background:#c22400; margin: auto;float:center}
#content-wrapper:hover{background:#FFA500;}
#main-wrapper{margin: auto;background:#ddd;float:center;overflow:hidden;width:700px;word-wrap:break-word;}
Sudah ingat kan sekarang baik sekarang kalian lihat macam-macam selektor di bawah ini :

Selector Example Example description CSS
 .class  .page-wrap  Memilih element kelas page-wrap 1
 #id #content-wrapper  Memilih element id content-wrapper 1
 *  *  Memilih semua element 2
 element  p  Memilih element <p> 1
 element,element  div,p  Memilih element <div> dengan <p> 1
 element element  div p  Memilih element <p> yang ada didalam element <div> 1
 element>element  div>p  Memilih element <p> dimana induknya ada di element <div> 2
 element+element  div+p  Memilih element <p> yang ditempatkan sesudah <div> 2
 [attribute]  [target]  Memilih element dengan atribut target 2
 [attribute=value]  [target=_blank]  Memilih element dengan targetnya yaitu _blank 2
 [attribute~=value]  [title~=flower]  Memilih semua element dengan judul flower 2
 [attribute|=language]  [lang|=en]  Memilih semua element dengan atribut lang yang di awali dengan en 2
 :link  a:link  Memilih semua link yang tidak di kunjungi 1
 :visited  a:visited  Memilih semua link yang sedang di kunjungi 1
 :active  a:active  Memilih semua link yang sedang di aktifkan 1
 :hover  a:hover  Memilih link yang sedang di sorot 1
 :focus  input:focus  Memilih elementinput yang sedang di fokuskan 2
 :first-letter  p:first-letter  Memilih huruf pertama pada element <p> 1
 :first-line  p:first-line  Memilih baris pertama pada element <p> 1
 :first-child  p:first-child  Memilih setiap element <p> pertama dari induknya 2
 :before  p:before  Memasukan konten "before" pada setiap element <p> 2
 :after  p:after  Memasukan konten "after" pada setiap element <p> 2
 :lang(language)  p:lang(it) Memilih setiap element <p> dengan atribut lang di mulai dengan "it" 2
 element1~element2  p~ul  Memilih setiap element ul yang di dahului oleh element <p> 3
 [attribute^=value]  a[src^="https"]  Memilih setiap element a yang di awali dengan https 3
 [attribute$=value]  a[src$=".pdf"]
 Memilih setiap element a yang di akhiri dengan .pdf
3
 [attribute*=value]  a[src*="farkryzer"]  Memilih setiap element a yang mengandung kata "farkryzer" 3
 :first-of-type  p:first-of-type  Memilih setiap element p yang element p pertama dari induknya 3
 :last-of-type  p:last-of-type  Memilih setiap element p yang element p terakhir dari induknya 3
 :only-of-type  p:only-of-type  Memilih setiap element p yang hanya element p dari induknya 3
 :only-child  p:only-child  Memilih setiap element p yang hanya anak element p dari induknya 3
 :nth-child(n)  p:nth-child(2)  Memilih setiap element p yang hanya anak kedua element p dari induknya 3
 :nth-last-child(n)  p:nth-last-child(2)  Memilih setiap element p yang hanya anak kedua dari induknya, termasuk anak yang terakhir 3
 :nth-of-type(n)  p:nth-of-type(2)  Memilih setiap element p yang hanya element p kedua dari induknya 3
 :nth-last-of-type(n)  p:nth-last-of-type(2)  Memilih setiap element p yang hanya element p kedua dari induknya, termasuk anak yang terakhir 3
 :last-child  p:last-child  Memilih semua element terakhir pada element p 3
 :root  :root  Memilih element dokumen root 3
 :empty  p:empty  Memilih setiap element p yang tidak memiliki anak (termasuk node teks) 3
 :target  #news:target  Memilih element #news yang masih aktif Selects the current active #news element 3
 :enabled  input:enabled  Memilih semua element input di aktifkan 3
 :disabled  input:disabled  Memilih semua element input di nonaktifkan
3
 :checked  input:checked  Memilih semua element input di periksa 3
 :not(selector)  :not(p) Memilih setiap elemen yang bukan elemen p 3
 ::selection  ::selection Memilih bagian dari elemen yang dipilih oleh pengguna 3

Untuk lihat contohnya silahkan menuju situs aslinya di >>> W3SCHOOLS 
klik linknya selector yang ingin di coba

6 komentar:

  1. wahhhh senangnya hatiku gan akhirnya sampean bisa posting ini, pokoknya seneng banget deh ane nyimak dulu

    BalasHapus
  2. wah2 pinter ni masny, ajarin css donk :)

    BalasHapus
  3. @cek info: silahkan baca yg sudah saya share di kategori belajar css (:

    BalasHapus
  4. oke :D
    btw : uda ane like :D

    BalasHapus
  5. @Cek Info: saya jgga dah like balik thx ya

    BalasHapus

Share entri ini :