I was finishing up selectors and testing my knowledge and encountered a problem that makes no sense.In my CSS file i wrote this code
li:first-child{
color: red;
}
2nd child colored red
In theory, this should color all first childs that are li red, yet, a first and second child are being colored red. This is the only code written in my CSS file. This is the entire HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contact us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
<li>John<ol>
<li>Patrick</li>
<li>Spongebob</li>
</ol></li>
<li>Sara<ol>
<li>Jonathan</li>
<li>Kragie</li>
</ol></li>
</ul>
</body>
</html>
Why is the second child colored red???