Bonjour !

Voilà, il y a quelque temps, j'ai ouvert ce sujet, pour changer la couleur d'un texte lors du passage de la souris sur une image. On m'a répondu d'utiliser les sélecteurs d’adjacence, ce qui avait fonctionné.
Mais maintenant que je veux faire quelque chose de similaire, mais cette fois, avec deux div, je me rends compte que ni le +, ni le ~ ne fonctionne.
Voici mes codes :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="styles.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
 
<div class="grand"><div id="1">Div 1</div><div id="2">Div 2</div></div>
 
</body>
</html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.grand{background-color:blue;}
 
#1:hover + #2 {background-color:red;}

Y-a-t-il quelque chose que je fais de travers ? Ou bien est ce que les sélecteurs d'adjacence ne sont-ils pas adapté à cette situation ? Auquel cas, que dois-je utiliser à leur place ?

Merci beaucoup pour vos réponses,
Cordialement,
X260SH.