<div class="container">
	<p>I'm just a paragraph.</p>
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Buckle my shoe...</li>
	</ul>
	<img src="https://placeimg.com/160/110/any">
	<p>Yet another paragraph.</p>
	<p>This is starting to get boring now.</p>
	<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>
		<p>I'm just a paragraph.</p>
	</div>
	<section class="first-last-of-type">
		<p>I'm just a paragraph.</p>
		<span>Hello from a span.</span>
		<span>And goodbye from a span.</span>
		<p>And so on...</p>
		<p>Here we go again.</p>
	</section>
</div>
body {
	font-family: arial;
}

p, ul, div div { margin-top: 0;}

div {
	margin: 20px;
	display: grid;
  grid-template-columns: repeat(8, 175px);
}

div :first-child {
	color: red;
}

div :last-child {
	color: blue;
}

.first-last-of-type :first-of-type {
	color: green;
}

.first-last-of-type :last-of-type {
	color: goldenrod;
}

.first-last-of-type {
	margin-left: 40px;
}

div :only-child {
	border: 1px solid green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.