Что делает a:focus в навигационной панели?

Всем привет. Разбираю 21 урок Bootstrap (CSS стилизация меню).

К сути вопроса имеет отношения эта часть кода:

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>

</div>

<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav nav-pills">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="films.html">Movies</a></li>
<li><a href="#">Serials</a></li>
<li><a href="rating.html">Movie ratings</a></li>
<li><a href="contact.html">Contact us</a></li>

</ul>

</div>
</div>

Для стилизации меню применили (пишу то, что непонятно):

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff;
background-color: #346270;
}

Почитал, что такое  focus. Это псевдокласс, который определяет стиль элемента, получающего фокус (например, текстовое поле формы - в рамочку берется, например). Поскольку указанна <а>, какая-то ссылка, в нашем случае!

Убираю я с CSS .li.active>a:focus - НИЧЕГО НЕ ПРОИСХОДИТ. присваиваю .li.active>a:focus другие цвет и бегграунд - НИЧЕГО НЕ ПРОИСХОДИТ. Добавляю к свойствам !important - НИЧЕГО НЕ ПРОИСХОДИТ!

Тогда, что именно выполняет .li.active>a:focus у нас на странице? Возможно, я что-то упустил в HTML коде!?

Спасибо!