CSS Pseudo dan CSS Grid System

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