Все псевдоклассы типа child

by fersterin

HTML

<div>
	<p>Lorem ipsum dolor sit. <b>first-child</b></p>
	<p>Alias quia rem, quisquam.</p>
	<p>Quos a, id eos.</p>
	<p>Sequi aliquam qui asperiores. <b>nth-child(4)</b> </p>
	<p>Ea non, tempore velit.</p>
	<p>Quasi exercitationem, et cum?</p>
	<p>Tenetur veniam cum quis.</p>
	<p>Beatae ducimus repudiandae, earum. <b>nth-last-child(3)</b></p>
	<p>Repellat odio itaque magnam.</p>
	<p>Atque aut harum dolorem. <b>last-child</b></p>
</div>
<hr>
<div class="dog">
	<p>peru color. Lorem ipsum dolor. <b>only-child</b></p>
</div>

CSS

html {
	overflow-y: scroll;
}
p:first-child {
	background: tomato;
}
p:nth-child(4){
	background: plum;
}
p:last-child {
	background: lightgreen;
}
p:nth-last-child(3){
	background: coral;
}
/* 
Чтобы псевдокласс работал, нужно чтобы теги p были обернуты в другой тег, например в div.
*/
div.dog p:only-child { /* Только для единственного потомка */
	background: peru;
}
/* Разделитель */
hr {
  font-size: 1.5em;
  text-align: center;
  margin: 0em auto;
  height: auto;
  border: transparent solid 0;
  background: transparent;
}

hr::before {
  content: "\2727\2003\2003\2727\2003\2003\2727";
}
b {
	color: white;
}