Kursus Membuat Web

iklan

Pseudo Class CSS

Apa Pseudo Class

pseudo-class digunakan untuk mendefinisikan keadaan khusus dari sebuah elemen.

Untuk contoh, ini bisa digunakan untuk :

  • Style sebuah elemen bila mouses over
  • Style visited dan unvisited links berbeda

Sintak

Sintak dari pseudo-classes:

selector:pseudo-class {
    property:value;
}

Anchor pseudo-classes

Link bisa ditampilkan dengan cara yang berbeda:

Contoh
/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
Lihat ...

Catatan : a:hover harus setelah a:link dan a:visited dalam urutan mendefinisikannya di CSS agar efektif!! a:active harus setelah a:hover dalam urutan mendefinisikannya di CSS agar efektif!! nama pseudo-class tidak case-sensitive.

pseudo-class dan CSS class

pseudo-class bisa dikombinasikan dengan CSS class:

Contoh
a.highlight:hover {
    color: #ff0000;
}
Lihat ...

Bila kita hover contoh link, warna akan berubah.

first-child pseudo-class CSS

pseudo-class first-child mencocokkan dengan yang ditentukan elemen anak yang pertama dari elemen lain.

Catatan : agar first-child bekerja di IE8 dan versi yang sebelumnya, <!DOCTYPE html> harus di deklarasikan.

Mencocokkan elemen <p> pertama

Pada contoh berikut ini, selector mencocokkan setiap elemen <p> anak pertama dari setiap elemen:

Contoh
p:first-child {
    color: blue;
}
Lihat ...

Mencocokkan elemen pertama <i> di semua elemen <p>

Pada contoh berikut ini, selector mencocokkan setiap elemen pertama <i> pada semua elemen <p>

Contoh
p i:first-child {
    color: blue;
}
Lihat ...

Mencocokkan elemen pertama <i> di semua elemen anak <p>

Pada contoh berikut ini, selector mencocokkan setiap elemen pertama <i> pada semua elemen anak <p>

Contoh
p:first-child i {
    color: blue;
}
Lihat ...

:lang pseudo-class CSS

:lang pseudo-class mengijinkan Anda untuk mendefinisikan aturan khusus untuk bahasa yang berbeda.

Catatan : IE8 mendukung :lang pseudo-class hanya jika <!DOCTYPE html> di deklarasikan.

Pada contoh dibwah ini, class :lang didefinisikan tanda quotation untuk elemen <q> dengan lang="no":

Contoh
q:lang(no) {
    quotes: "~" "~";
}
Lihat ...

Contoh Lain

menambahkan style berbeda untuk hyperlink

Contoh ini menunjukkan bagaimana menambahkan style berbeda untuk hyperlink.

Menggunakan :focus

Contoh ini menunjukkan bagaimana menggunakan :focus pseudo-class.

Semua Pseudo Class CSS

Selector Contoh Keterangan Contoh
:active a:active Memilih link active
:checked input:checked Memilih setiap elemen <input> yang di check
:disabled input:disabled Memilih setiap elemen <input> yang di disable
:empty p:empty Memilih setiap elemen <p> tidak memiliki anak
:enabled input:enabled Memilih setiap elemen <input> yang enable
:first-child p:first-child Memilih setiap elemen <p> yang anak pertama dari orang tuanya.
:first-of-type p:first-of-type Memilih setiap elemen <p> yang elemen <p> adalah orang tua
:focus input:focus Memilih elemen <input> yang fokus
:hover a:hover Memilih link di mouse over
:in-range input:in-range Memilih elemen <input> dengan nilai yang ditentukan range nya.
:invalid input:invalid Memilih semua elemen <input> dengan nilai invalid
:lang(language) p:lang(it) Memilih setiap elemen <p> dengan attribute lang dengan nilai dimulai dengan "it"
:last-child p:last-child Memilih setiap elemen <p> anak terakhir dari orang tuanya
:last-of-type p:last-of-type Memilih setiap elemen <p> yang elemen <p> terakhir dari orang tuanya.
:link a:link Memilih semua unvisited link
:not(selector) :not(p) Memilih setiap elemen yang tidak elemen <p>
:nth-child(n) p:nth-child(2) Memilih setiap elemen <p> yang anak kedua dari induknya
:nth-last-child(n) p:nth-last-child(2) Memilih setiap elemen <p> yang anak kedua dari induknya, dihitung dari anak terakhir
:nth-last-of-type(n) p:nth-last-of-type(2) Memilih setipa elemen <p> yang kedua elemen <p> dari induknya, dihitung dari anak terakhir
:nth-of-type(n) p:nth-of-type(2) Memilih setiap elemen <p> yang kedua elemen <p> dari induknya
:only-of-type p:only-of-type Memilih setiap elemen <p> yang hanya elemen <p> dari induknya
:only-child p:only-child Memilih setiap elemen <p> yang hanya anak dari induknya
:optional input:optional Memeilih elemen <input> dengan attribute tidak "required"
:out-of-range input:out-of-range Memilih lemen <input> dengan nilai diluar dari range yang ditentukan
:read-only input:read-only Selects elements with a "readonly" attribute specified
:read-write input:read-write Selects elements with no "readonly" attribute
:required input:required Selects elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all elements with a valid value
:visited a:visited Selects all visited links

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015