<h3>Shopping List</h3>
<div>
	<ul>
		<li>Milk</li>
		<li>Eggs</li>
		<li>Soap</li>
		<li>Tomatoes</li>
		<li>Pasta</li>
		<li>Washing Powder</li>
		<li>Salt</li>
		<li>Baked Beans</li>
	</ul>
	<ul>
		<li>Milk</li>
		<li>Eggs</li>
		<li>Soap</li>
		<li>Tomatoes</li>
		<li>Pasta</li>
		<li>Washing Powder</li>
		<li>Salt</li>
		<li>Baked Beans</li>
	</ul>
</div>
body {
	font-family: arial;
}

ul:first-child li:nth-child(2) {
	color: red;
}

ul:first-child li:nth-last-child(3) {
	color: blue;
}

ul:first-child li:nth-of-type(3) {
	color: green;
}

ul:first-child li:nth-last-of-type(2) {
	color: goldenrod;
}

ul:last-of-type li:nth-child(1) {
	color: hotpink;
	font-style: italic;
}

ul:last-of-type li:nth-last-child(3) {
	color: brown;
	font-weight: bold;
}

ul:last-of-type li:nth-of-type(4) {
	color: orange;
	text-decoration: line-through;
}

ul:last-of-type li:nth-last-of-type(2) {
	color: #aaa;
}

ul:last-of-type li:nth-last-of-type(2)::after {
	content: " (2nd from end)";
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;
	color: #777;
}

div {
	display: grid;
  grid-template-columns: 200px 200px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.