NEW
Font size
WorksheetsCSS Pseudo dan CSS Grid System
Total questions: 20
Worksheet time: 9mins
CSS Pseudo yang digunakan untuk mendefinisikan keadaan khusus dari suatu elemen.
Pseudo Class
Pseudo Element
Pseudo ID
Pseudo Attribute
CSS Pseudo yang digunakan untuk menata bagian tertentu dari suatu elemen.
Pseudo Class
Pseudo Element
Pseudo ID
Pseudo Attribute
Contoh CSS Pseudo Class
active
after
reactive
transfer
Contoh CSS Pseudo Element
active
after
reactive
transfer
a:link {
color: #FF0000;
}
Adalah Contoh dari
unvisited link
visited link
mouse over link
selected link
a:active {
color: #FF0000;
}
Adalah Contoh dari
unvisited link
visited link
mouse over link
selected link
p i:first-child {
color: blue;
}
Selector diatas adalah untuk
menunjuk element i pertama
menunjuk ke elemen i pertama pada masing-masing p
menunjuk ke elemen p pertama pada masing-masing i
menunjuk ke elemen p pertama
p:first-child i {
color: blue;
}
Selector diatas adalah untuk
menunjuk ke semua element i pada setiap p pertama sebagai anak
menunjuk ke elemen i pertama pada masing-masing p
menunjuk ke elemen p pertama pada masing-masing i
menunjuk ke elemen p pertama
q:lang(no) {
quotes: "~" "~";
}
...
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
mana output yang paling sesuai dengan hasil potongan kode diatas
Some text ~A quote in a paragraph~ Some text.
Some text 'A quote in a paragraph' Some text.
Some text "A quote in a paragraph" Some text.
Some text (A quote in a paragraph) Some text.
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
dari style diatas manakah pernyataan yang benar
element p akan berwarna #ff0000
class intro akan berwarna #ff0000
huruf pertama dari elemen p dengan class intro akan berwarna #ff0000
semua huruf pertama akan berwarna #ff0000
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
pernyataan berikut adalah benar untuk style diatas, kecuali...
huruf pertama paragraf akan berwarna #ff0000, dalam ukuran font xx-large
Sisa dari baris pertama akan berwarna #0000ff, dan dalam huruf kecil.
baris kedua dari paragraf dan seterusnya akan menjadi ukuran dan warna font default
style tersebut tidak berpengaruh
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
pernyataan berikut adalah benar untuk style diatas, kecuali...
merupakan pseudo class
merupakan pseudo element
baris kedua dari paragraf dan seterusnya akan menjadi ukuran dan warna font default
huruf pertama paragraf akan berwarna #ff0000, dalam ukuran font xx-large
p::before {
content: url(smiley.gif);
}
output yang mungkin untuk style diatas adalah...
# Love Indonesia
Love #Indonesia
Love Indonesia#
#Love Indonesia#
p::After{
content: url(smiley.gif);
}
output yang mungkin untuk style diatas adalah...
# Love Indonesia
Love #Indonesia
Love Indonesia#
#Love Indonesia#
::marker {
color: red;
font-size: 23px;
}
berikut adalah pernyataan yang benar dari style diatas, kecuali...
merupakan pseudo element
marker element li akan ditampilkan dengan warna merah
element li akan ditampilkan dengan warna merah
benar semua
::selection {
color: red;
background: yellow;
}
Pernyataan berikut adalah benar untuk style di atas, kecuali...
setiap konten yang diblok oleh user akan berwarna merah
setiap konten yang diblok oleh user akan berwarna latar belakang kuning
setiap konten yang diblok oleh user akan berwarna merah dan berlatarbelakang kuning
setiap konten yang diblok oleh user akan berwarna kuning dan berlatarbelakang merah
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Dari CSS Grid, style diatas adalah untuk...
membuat sebuah grid dengan 4 kolom
membuat sebuah grid dengan 4 baris
membuat 4 grid dengan
membuat 4 grid dengan 4 kolom
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Kolom ke-3 memiliki lebar...
tidak tau
lebar view port - 320px
200px
80px
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Pernyataan yang benar dari style di atas adalah...
baris pertama memiliki tinggi 80px s.d. 200px
baris pertama memiliki tinggi 80px dan baris kedua 200px
baris ketiga memiliki tinggi 80px
baris keempat memiliki tinggi 80px
Pernyataan berikut yang salah adalah...
Properti justify-content digunakan untuk menyelaraskan seluruh grid di dalam container.
Properti align-content digunakan untuk menyelaraskan seluruh grid secara vertikal di dalam container.
Tinggi total kisi harus kurang dari tinggi wadah agar properti align-content memiliki efek.
Salah semua
