:target

Есть ссылки, которые ведут не просто на страницу, а на конкретный HTML-элемент внутри. Псевдокласс :target управляет стилем этого элемента.

После любого селектора ставим двоеточие и пишем ключевое слово target.

        
          
          .title {  color: black;}.title:target{  color: pink;}
          .title {
  color: black;
}

.title:target{
  color: pink;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          p:target::before {  content: '';  font-size: 10px;  color: yellow;}
          p:target::before {
  content: '';
  font-size: 10px;
  color: yellow;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер видит идентификатор в адресной строке — он идёт после символа # — и находит HTML-элемент, у которого такой же id. Стилем этого элемента и управляет псевдокласс :target.

Сейчас в адресной строке такой URL:

https://doka.guide/html/a/#podskazki

Движок находит элемент с id «podskazki» и подставляет ему дополнительный автоматический класс, чтобы пометить изменение состояния.

        
          
          <div class="container" id="podskazki">  <h2>Подсказки</h2></div>
          <div class="container" id="podskazki">
  <h2>Подсказки</h2>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .container {  background-color: white;}.container:target {  background-color: yellow;}
          .container {
  background-color: white;
}

.container:target {
  background-color: yellow;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Этому классу мы можем задавать любые стили, подходящие по дизайну.

Когда мы перейдём по другому якорю и ссылка сменится, то и все свойства :target перейдут со старого элемента на новый. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.