/ ↲
    Расширенный поиск

    CSS

    :target

    Управляет стилем элемента, на который ссылается якорная ссылка.

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

    Кратко

    Скопировано

    Есть ссылки, которые ведут не просто на страницу, а на конкретный 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 перейдут со старого элемента на новый. При этом логика подставления или удаления этого класса скрыта под капотом движка браузера.

    Читайте также