Tentei utilizar o h2 na hierarquia e não funcionou.

Olá, comparando o meu código com o que está disponível para baixar no site para realizar o exercício https://cursos.alura.com.br/course/avancando-html-css/task/6184, vi a seguinte diferença:

Meu código:

HTML:
 <section class="secao-inicio blog">
                <h2 class="ultimos-posts">Blog</h2>
                <small>Últimos posts</small>
                <ol>
                    <li class="mais-recente" tabindex="1">
                        <a href="blog.html">O essencial de design responsivo</a>
                        <p class="inicio-post">
                            Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web
                            para dispositivos móveis. Mas como começar?
                        </p>
                    </li>

CSS:
.ultimos-posts a:hover + .inicio-post,
.ultimos-posts a:focus + .inicio-post{
    display: block;
}

.ultimos-posts a:hover,
.ultimos-posts a:focus{
    background-color: #F2FFFC;
    color: #F26;
}

O código baixado no site utiliza a classe blog, que pertence ao section. Ou seja, o que muda são os pais. O elemento "a" é filho de section e também é filho de h2. Por que então do modo que fiz não funcionou?

Código: https://github.com/rruizdasilva/curso_html_css.git