How to teach to understand css that that particular page is currently selected?

Question

css

How to teach css to understand that now this is how the page is selected.
Home:

<div class="header">
<ul class="menu">
<li><a class ="selected" href="/">Главная</a></li>
<li><a href="inf.html">О нас</a></li>
<li><a href="photo.html">Фотогалерея</a></li>
<div class="l1"></div>
</ul>
</div>

2nd page:

<div class="header">
<ul class="menu">
<li><a href="/">Главная</a></li>
<li><a class ="selected"  href="inf.html">О нас</a></li>
<li><a href="photo.html">Фотогалерея</a></li>
<div class="l2"></div>
</ul>
</div>

3rd page:

<div class="header">
<ul class="menu">
<li><a href="/">Главная</a></li>
<li><a href="inf.html">О нас</a></li>
<li><a class ="selected"  href="photo.html">Фотогалерея</a></li>
<div class="l3"></div>
</ul>
</div>

.header {
  padding: 10px 25px;
  width: auto;
  height: 50px;
  background: rgba(108, 167, 241, .9);
  box-shadow: 2px 0 5px #555
}

ul.menu {
  list-style: none;
  margin-top: 13px
}

ul.menu li {
  display: inline;
  font: 15pt 'Roboto Condensed', sans-serif;
  padding-left: 100px
}

ul.menu li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5)
}

ul.menu li a:hover {
  color: rgba(255, 255, 255, 0.8)
}

ul.menu li a.selected {
  color: #fff
}

I did it clumsily, because of the selected parameter of the links, I didn’t find anything about this in Google (I just don’t understand what to look for).
Excuse my French, I'm still learning)

Answer 1

No way, css knows nothing about where who is. Only through js.

Answer 2

you can add an anchor to the links, that is, for example, it will not be inf.html but inf.html#inf
and then you can set styles for each item like this:

ul.menu li:target a{

}

and each menu item should naturally have a corresponding ID