:first- |:last- child — любой E,

dabblet.css

/* 
	:first- |:last- child — любой E, 
	являющийся первым или последним ребенком
*/

.parent li:first-child
{
	border: 3px solid red;
}

.parent :first-child
{
	background: yellow;
}

.parent li.child:first-child
{
	font-weight: bold;
}

/* 
	любой первый преставитель своего типа элементов
	среди братьев
*/
.parent li:first-of-type:before
{
	content: "first of type >> ";	
}

/* 
	выбирает элементы, которые являются единственными
	вложенными элементами в родителя
*/
.parent :only-child:before
{
	content: "only-child >> ";	
	font-weight: bold;
}

/* 
	выбирает элементы, которые являются единственными
	своего типа среди братьев 
	(в том числе и просто единственные у своего родителя)
*/
.parent span:only-of-type
{
	border: 1px dashed;
}

dabblet.html

<ol class="parent">
	<li class="child child01">child</li>
	<li class="child child02">
		child
		<div class="descendant">descendant</div>
		<div class="child">fake child</div>
		<span>span</span>
		<ul>
			<li>
				<div>sublist</div>
				<span>and span here</span>
			</li>
			<li>
				<span>sublist</span>				
			</li>			
		</ul>
	</li>
	<li class="child child03">child</li>
	<li class="child child04">child</li>	
	<li class="child child05">child</li>
	<li class="child child06">child</li>
	<li class="child child07">child</li>
	<li class="child child08">child</li>
	<li class="child child09">child</li>
	<li class="child child10">child</li>
	<li class="child child11">child</li>							
</ol> 

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}