:target

Псевдокласс :target выбирает элемент, на который указывает фрагмент URL — часть адреса после символа #.

Это позволяет изменять внешний вид элемента, к которому пользователь перешёл по якорной ссылке.

Например, если открыт адрес: https://doka.guide/css/target/#example, то браузер найдёт элемент с идентификатором example и применит к нему стили из селектора :target.

Часто :target используют для подсветки разделов статьи после перехода по оглавлению.

        
          
          <nav>  <a href="#html">HTML</a>  <a href="#css">CSS</a>  <a href="#js">JavaScript</a></nav><section id="html">  <h2>HTML</h2></section><section id="css">  <h2>CSS</h2></section><section id="js">  <h2>JavaScript</h2></section>
          <nav>
  <a href="#html">HTML</a>
  <a href="#css">CSS</a>
  <a href="#js">JavaScript</a>
</nav>

<section id="html">
  <h2>HTML</h2>
</section>

<section id="css">
  <h2>CSS</h2>
</section>

<section id="js">
  <h2>JavaScript</h2>
</section>

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

        
          
          section:target {  background-color: #fff4b8;}
          section:target {
  background-color: #fff4b8;
}

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

После селектора ставим двоеточие и указываем псевдокласс target.

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

.title:target {
  color: pink;
}

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

Можно комбинировать :target с псевдоэлементами:

        
          
          p:target::before {  content: "►";  color: yellow;  margin-right: 0.25em;}
          p:target::before {
  content: "►";
  color: yellow;
  margin-right: 0.25em;
}

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

А также со вложенными селекторами:

        
          
          article:target h2 {  color: crimson;}
          article:target h2 {
  color: crimson;
}

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

Когда браузер загружает страницу, он анализирует её адрес. Если в URL есть фрагмент после символа #, браузер ищет элемент с соответствующим значением атрибута id. Например, для адреса:
https://example.com/help/#installation

целевым элементом станет:

        
          
          <section id="installation">  Инструкция по установке</section>
          <section id="installation">
  Инструкция по установке
</section>

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

Такой элемент считается текущей целью документа и совпадает с селектором :target. Важно понимать, что браузер не добавляет элементу дополнительный класс. Вместо этого он временно считает элемент подходящим под псевдокласс :target. Если пользователь перейдёт по другому якорю, состояние автоматически перейдёт к новому элементу. Если в URL нет фрагмента или соответствующий элемент не найден, :target не совпадает ни с одним элементом страницы.

💡 :target удобно использовать для подсветки разделов длинных статей после перехода по оглавлению.
💡 Часто применяется вместе с плавной прокруткой:

        
          
          html {  scroll-behavior: smooth;}
          html {
  scroll-behavior: smooth;
}

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

💡 С помощью :target можно создавать простые интерфейсы без JavaScript — например, вкладки, аккордеоны или модальные окна.
💡 Целевым элементом может быть любой HTML-элемент с уникальным id, а не только заголовки и секции.
💡 Хорошей практикой считается добавлять анимацию или визуальный акцент, чтобы пользователь сразу заметил нужный элемент:

        
          
          :target {  animation: highlight 1s ease;}@keyframes highlight {  from {    background-color: #ffec99;  }  to {    background-color: transparent;  }}
          :target {
  animation: highlight 1s ease;
}

@keyframes highlight {
  from {
    background-color: #ffec99;
  }

  to {
    background-color: transparent;
  }
}

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