CSS3 Pseudo-classes

This demo shows some basic applications of CSS3 Pseudo-classes

Works

Paragraph 1:Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.

Paragraph 2:Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.

Paragraph 3: Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.

Codes

p:nth-child(2) {
	padding: 15px;
	background-color: #333;
	color: #fff;
}
  • List 1: Cotton candy apple pie topping.
  • List 2: Biscuit gummi bears sweet
  • List 3: Jujubes fruitcake bear claw chocolate bar.
  • List 4: Tart carrot cake cookie marzipan pastry toffee.
  • List 5: Wafer tiramisu marzipan tart.
  • List 6: Halvah chocolate bar.
  • List 7: Toffee sugar plum.
  • List 8: Caramels pastry pie.

Codes

li:nth-child(2n+1) {
	padding: 5px;
	background-color: #333;
	color: #fff;
	margin: 10px 0; 
}

Doesn't Work

Paragraph 1:Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.

Blockquote Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.

Paragraph 2:Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.

Paragraph 3: Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.

Codes

p:nth-child(2) {
	padding: 15px;
	background-color: #333;
	color: #fff;
}

The second paragraph won't be selected as the position is replaced with a blockquote element.

Fork me on GitHub