tutorial pengembangan web terbaru
 

CSS Pseudo-elemen

❮ Sebelumnya Bab selanjutnya ❯

Apa Pseudo-Elements?

Sebuah CSS pseudo-element digunakan untuk gaya tertentu bagian dari elemen.

Sebagai contoh, dapat digunakan untuk:

  • Gaya huruf pertama, atau jalur, dari unsur
  • Sisipkan konten sebelum, atau setelah, isi elemen

Sintaksis

Sintaks pseudo-elemen:

selector::pseudo-element {
    property:value;
}
Catatan Perhatikan notasi usus ganda - ::first-line dibandingkan :first-line

Usus ganda menggantikan notasi tunggal usus untuk pseudo-elemen dalam CSS3. Ini merupakan upaya dari W3C untuk membedakan antara pseudo-kelas dan pseudo-elemen.

Sintaks single-usus digunakan untuk kedua pseudo-kelas dan pseudo-elemen dalam CSS2 dan CSS1.

Untuk kompatibilitas, sintaks tunggal usus dapat diterima untuk CSS2 dan CSS1 pseudo-elemen.

The ::first-line Pseudo-elemen

The ::first-line pseudo-elemen digunakan untuk menambah gaya khusus untuk baris pertama dari teks.

Contoh berikut format baris pertama dari teks dalam semua <p> elemen:

Contoh

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Cobalah sendiri "

Catatan: ::first-line pseudo-elemen hanya dapat diterapkan untuk memblokir tingkat elemen.

Properti berikut berlaku untuk ::first-line pseudo-elemen:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The ::first-letter Pseudo-elemen

The ::first-letter pseudo-elemen digunakan untuk menambah gaya khusus dengan huruf pertama dari teks.

Contoh berikut format huruf pertama dari teks dalam semua <p> elemen:

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Cobalah sendiri "

Catatan: ::first-letter pseudo-elemen hanya dapat diterapkan untuk memblokir tingkat elemen.

Properti berikut berlaku untuk ::first-letter pseudo- elemen:

  • font properti
  • color sifat
  • background properti
  • margin sifat
  • padding properti
  • border properti
  • text-decoration
  • vertical-align (hanya jika "float" adalah "none" )
  • text-transform
  • line-height
  • float
  • clear

Pseudo-elemen dan CSS Kelas

Pseudo-elemen dapat dikombinasikan dengan kelas CSS:

Contoh

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
Cobalah sendiri "

Contoh di atas akan menampilkan huruf pertama dari paragraf dengan class="intro" , merah dan dalam ukuran yang lebih besar.

Beberapa Pseudo-elemen

Beberapa pseudo-elemen juga dapat dikombinasikan.

Pada contoh berikut, huruf pertama dari sebuah paragraf akan merah, dalam ukuran font xx-besar. Sisa dari baris pertama akan berwarna biru, dan topi kecil. Sisa paragraf akan menjadi ukuran font default dan warna:

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
Cobalah sendiri "

CSS - The ::before Pseudo-elemen

The ::before pseudo-elemen dapat digunakan untuk memasukkan beberapa konten sebelum konten dari elemen.

Contoh berikut menyisipkan gambar sebelum isi setiap <h1> elemen:

Contoh

h1::before {
    content: url(smiley.gif);
}
Cobalah sendiri "

CSS - The ::after Pseudo-elemen

The ::after pseudo-elemen dapat digunakan untuk memasukkan beberapa konten setelah isi elemen.

Contoh berikut menyisipkan gambar setelah isi setiap <h1> elemen:

Contoh

h1::after {
    content: url(smiley.gif);
}
Cobalah sendiri "

CSS - The ::selection Pseudo-elemen

The ::selection pseudo-elemen sesuai porsi elemen yang dipilih oleh pengguna.

Sifat CSS berikut dapat diterapkan untuk ::selection : color , background , cursor , dan outline .

Contoh berikut membuat merah teks yang dipilih pada latar belakang kuning:

Contoh

::selection {
    color: red;
    background: yellow;
}
Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 »

Semua CSS Pseudo Elemen

Pemilih Contoh deskripsi contoh
::after p::after Memasukkan sesuatu setelah isi setiap <p> elemen
::before p::before Memasukkan sesuatu sebelum isi setiap <p> elemen
::first-letter p::first-letter Memilih huruf pertama dari setiap <p> elemen
::first-line p::first-line Memilih baris pertama dari setiap <p> elemen
::selection p::selection Memilih bagian dari suatu unsur yang dipilih oleh pengguna

Semua Kelas CSS Pseudo

Pemilih Contoh deskripsi contoh
:active a:active Memilih link aktif
:checked input:checked Memilih setiap diperiksa <input> elemen
:disabled input:disabled Memilih setiap cacat <input> elemen
:empty p:empty Memilih setiap <p> elemen yang tidak memiliki anak
:enabled input:enabled Memilih setiap diaktifkan <input> elemen
:first-child p:first-child Memilih setiap <p> elemen yang merupakan anak pertama dari induknya
:first-of-type p:first-of-type Memilih setiap <p> unsur yang pertama <p> unsur induknya
:focus input:focus Memilih <input> elemen yang memiliki fokus
:hover a:hover Memilih link pada mouse
:in-range input:in-range Memilih <input> elemen dengan nilai dalam kisaran tertentu
:invalid input:invalid Memilih semua <input> elemen dengan nilai yang tidak valid
:lang(language) p:lang(it) Memilih setiap <p> elemen dengan nilai atribut lang dimulai dengan "it"
:last-child p:last-child Memilih setiap <p> elemen yang merupakan anak terakhir dari induknya
:last-of-type p:last-of-type Memilih setiap <p> unsur yang terakhir <p> unsur induknya
:link a:link Memilih semua link yang belum dikunjungi
:not(selector) :not(p) Memilih setiap elemen yang tidak <p> elemen
:nth-child(n) p:nth-child(2) Memilih setiap <p> unsur yang merupakan anak kedua dari induknya
:nth-last-child(n) p:nth-last-child(2) Memilih setiap <p> unsur yang merupakan anak kedua dari induknya, menghitung dari anak terakhir
:nth-last-of-type(n) p:nth-last-of-type(2) Memilih setiap <p> unsur yang kedua <p> unsur induknya, menghitung dari anak terakhir
:nth-of-type(n) p:nth-of-type(2) Memilih setiap <p> unsur yang kedua <p> unsur induknya
:only-of-type p:only-of-type Memilih setiap <p> unsur yang merupakan satu-satunya <p> unsur induknya
:only-child p:only-child Memilih setiap <p> unsur yang merupakan satu-satunya anak dari induknya
:optional input:optional Memilih <input> elemen tanpa "required" atribut
:out-of-range input:out-of-range Memilih <input> elemen dengan nilai luar kisaran tertentu
:read-only input:read-only Memilih <input> elemen dengan "readonly" atribut tertentu
:read-write input:read-write Memilih <input> elemen tanpa "readonly" atribut
:required input:required Memilih <input> elemen dengan "required" atribut tertentu
:root root Memilih elemen root dokumen ini
:target #news:target Memilih aktif saat #news elemen (diklik pada URL yang berisi nama anchor)
:valid input:valid Memilih semua <input> elemen dengan nilai yang valid
:visited a:visited Memilih semua link yang dikunjungi

❮ Sebelumnya Bab selanjutnya ❯