:target

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

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"

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

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

.title:target{
  color: pink;
}

        
        
          
        
      
        
          
          p:target::before {  font-size: 10px;  content: '';  color: yellow;}
          p:target::before {
  font-size: 10px;
  content: '';
  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 перейдут со старого элемента на новый. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.