Struktur CSS

Struktur CSS sangatlah sederhana. Bayangkan, kita hanya perlu menyusun 3 jenis elemen, yaitu selector, property, dan value. Selector adalah semua pengenal yang digunakan untuk memilih (select) elemen mana saja dalam kode HTML yang ingin kita atur style-nya. Dengan kata lain, selector menunjukkan objek apa yang akan diatur style-nya. Properti adalah atribut dari objek tersebut, sedangkan value adalah nilai atributnya.

Secara sederhana bisa dituliskan sebagai berikut:

selector { property: value }

Berikut beberapa contoh penggunaannya:

  1. Penggunaan pada sebuah elemen (tag HTML)
    h1 { color: red }

    h1 -> selector berupa tag HTML
    color -> property
    red -> value

  2. Beberapa selector dipisahkan dengan koma (,)
    h1,h2,h3 { color: red }
  3. Memilih tag dalam tag pisahkan dengan spasi
    div p {  background-color:yellow; }

    Contoh di atas berarti memilih tag p yang ada di dalam tag div.

  4. Beberapa property dipisahkan dengan titik koma (;)
    h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
  5. Selector class dimulai dengan tanda titik (.)
    .intro{
    background-color:yellow;
    }

    Class pada tag HTML tertentu

    p.hometown {
    background-color:yellow;
    }
  6. Selector id diawali dengan tanda pagar (#)
    #firstname {
    background-color:yellow;
    }
  7. Memilih semua elemen HTML, gunakan tanda bintang/asterisk (*)
    * { background-color:yellow; }

    Jika diterapkan pada semua tag, menjadi seperti ini

    div * {
    background-color:yellow;
    }

Berikut adalah penulisan selector selengkapnya:

Selector Contoh Keterangan CSS
.class .intro Memilih semua elemen/tag HTML dengan class=”intro” 1
#id #firstname memilih semua elemen dengan id=”firstname” 1
* * Memilih semua elemen 2
element p Memilih semua elemen <p> 1
element,element div,p Memilih semua elemen <div> dan semua elemen <p> 1
element element div p Memilih semua elemen <p> yang ada di dalam elemen <div> 1
element>element div>p Memilih semua elemen <p> yang induknya adalah elemen <div> 2
element+element div+p Memilih semua elemen <p> yang terletak sesudah elemen <div> 2
[attribute] [target] Memilih semua elemen with a target attribute 2
[attribute=value] [target=_blank] Memilih semua elemen with target=”_blank” 2
[attribute~=value] [title~=flower] Memilih semua elemen with a title attribute containing the word “flower” 2
[attribute|=value] [lang|=en] Memilih semua elemen with a lang attribute value starting with “en” 2
:link a:link Memilih semua link yang belum dikunjungi 1
:visited a:visited Memilih semua link yang telah dikunjungi 1
:active a:active Memilih link yang sedang aktif 1
:hover a:hover Memilih link pada saat mouse over (pointer mouse melintasi link) 1
:focus input:focus Memilih elemen input yang sedang difokus 2
:first-letter p:first-letter Memilih huruf pertama dari setiap elemen <p> 1
:first-line p:first-line Memilih baris pertama dari setiap elemen <p> 1
:first-child p:first-child Memilih setiap elemen <p> yang merupakan anak pertama dari induknya 2
:before p:before Memasukkan konten setiap sebelum elemen <p> 2
:after p:after Memasukkan konten setiap setelah elemen <p> 2
:lang(language) p:lang(it) Memilih semua elemen <p> dengan atribut lang yang diawali dengan “it” 2
element1~element2 p~ul Memilih setiap elemen <ul>  yang didahului dengan elemen <p> 3
[attribute^=value] a[src^=”https”] Memilih setiap elemen <a> yang atribut src-nya dimulai dengan “https” 3
[attribute$=value] a[src$=”.pdf”] Memilih semua elemen <a> yang atribut src-nya diakhiri dengan “.pdf” 3
[attribute*=value] a[src*=”w3schools”] Memilih semua elemen <a> yang atribut src-nya mengandung string “w3schools” 3
:first-of-type p:first-of-type Memilih setiap elemen <p> yang merupakan elemen <p> pertama bagi induknya 3
:last-of-type p:last-of-type Memilih setiap elemen <p> yang merupakan elemen <p> terakhir bagi induknya 3
:only-of-type p:only-of-type Memilih setiap elemen <p> yang merupakan satu-satunya elemen <p> bagi induknya 3
:only-child p:only-child Memilih setiap elemen <p> yang merupakan satu-satunya elemen yang dimiliki induknya 3
:nth-child(n) p:nth-child(2) Memilih setiap elemen <p> yang merupakan anak kedua bagi induknya 3
:nth-last-child(n) p:nth-last-child(2) Memilih setiap elemen <p> yang merupakan anak kedua dari induknya, dihitung dari anak terakhir 3
:nth-of-type(n) p:nth-of-type(2) Memilih setiap elemen <p> yang merupakan elemen <p> kedua bagi induknya 3
:nth-last-of-type(n) p:nth-last-of-type(2) Memilih setiap elemen <p> yang merupakan elemen <p> kedua bagi induknya, dihitung anak terakhir 3
:last-child p:last-child Memilih setiap elemen <p> yang merupakan anak terakhir dari induknya 3
:root :root memilih elemen root dari dokumen HTML 3
:empty p:empty Memilih setiap elemen <p> yang tidak ada anaknya, termasuk teks 3
:target #news:target Memilih elemen #news yang sedang aktif (diklik, tampak pada URL mengandung nama #news) 3
:enabled input:enabled Memilih setiap elemen <input> yang enable 3
:disabled input:disabled Memilih setiap elemen <input> yang disabled 3
:checked input:checked Memilih setiap elemen <input> yang dicek 3
:not(selector) :not(p) Memilih setiap elemen selain elemen <p> 3
::selection ::selection Memilih bagian dari elemen yang dipilih pengguna 3

 

Pos ini dipublikasikan di Developer. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s