I try to change the color of the first li
Then you must apply the pseudoelector to li instead of the menu.
#menu li:first-child > a {
background-color: gray;
}
Note that we apply the rule to the child of the first li that is a because they have a black background.
Update
But when I select another, it keeps appearing gray
Sure, because you use first-child which causes this element to always have those rules. Unfortunately the ~ selector only selects adjacent, not previous, siblings.
This behavior can be done with Flexbox or with JavaScript.
Flexbox
/* General */
body{
background-color: #000000;
}
/* ------- */
/* 1.0 - Menu de navegación */
#menu{
display: flex;
flex-direction: row-reverse;
list-style-type:none;
margin:0;
padding:0;
}
#menu li {
float: left;
}
#menu li a {
background-color: black;
color: white;
padding: 16px 16px 16px 16px;
display:block;
font-family: monospace;
text-decoration:none;
border-bottom: 2px solid white;
}
#menu li:last-child > a {
background-color: gray;
}
#menu li:hover > a {
background-color: gray;
}
#menu li:hover ~ li > a {
background-color: #000;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Astro cosmos</title>
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li><a href="#others.html">Otro</a></li>
<li><a href="#computacion.html">Computación</a></li>
<li><a href="#physics.html">Física</a></li>
<li><a href="#maths.html">Matemáticas</a></li>
<li><a href="#home.html">Inicio</a></li>
</ul>
</body>
</html>
JavaScript
let activeMenuPosition = 0;
const menus = Array.from(document.querySelectorAll('#menu li'));
menus.forEach(function(menu) {
menu.addEventListener('mouseenter', function() {
resetActiveMenu();
});
menu.addEventListener('mouseleave', function() {
restoreActiveMenu();
});
});
function getActiveMenu() {
return menus.find(function(menu) {
return menu.classList.contains('active');
});
}
function getActiveMenuPosition() {
const activeMenu = getActiveMenu();
return menus.indexOf(activeMenu);
}
function resetActiveMenu() {
const activeMenu = getActiveMenu();
activeMenu.classList.remove('active');
}
function restoreActiveMenu() {
const activeMenu = menus[activeMenuPosition];
activeMenu.classList.add('active');
}
/* General */
body{
background-color: #000000;
}
/* ------- */
/* 1.0 - Menu de navegación */
#menu{
list-style-type:none;
margin:0;
padding:0;
}
#menu li {
float: left;
}
#menu li a {
background-color: black;
color: white;
padding: 16px 16px 16px 16px;
display:block;
font-family: monospace;
text-decoration:none;
border-bottom: 2px solid white;
}
#menu li:hover a,
#menu li.active a {
background-color: gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Astro cosmos</title>
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li class="active"><a href="#home.html">Inicio</a></li>
<li><a href="#maths.html">Matemáticas</a></li>
<li><a href="#physics.html">Física</a></li>
<li><a href="#computacion.html">Computación</a></li>
<li><a href="#others.html">Otro</a></li>
</ul>
</body>
</html>
With Flexbox you solve the problem when by default the active menu is the first, but if the active element is the last one, you will have the same problem.