Справочник по CSS : Тематический указатель : Селекторы : Псевдоклассы : :target

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Псевдокласс :target

Используется для добавления стиля к целевому элементу (якорной ссылке) на странице.

Синтаксис

element:target { style properties }

Замечания

Часто на странице с большим количеством текста используются якорные ссылки (anchor), чтобы нажав на заголовок вверху страницы, пользователь автоматически перешел к нужному фрагменту текста, не прокручивая документ самостоятельно. Якорем может быть любой элемент, для которого указан id.

С помощью псевдокласса :target целевым элементам можно назначить различные стили.

Примеры

В примерах показано как описать псевдокласс :target.

:target { outline: dotted red }  /* рисуем красную пунктирную линию вокруг элемента */
/* красно-желтые стрелки указывают на целевой элемент */  

:target { 
    -moz-box-shadow:  0.2em 0.2em 0.3em #888;
 -webkit-box-shadow:  0.2em 0.2em 0.3em #888;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}
/* целевые заголовки формата h1 будут подсвечены красным */
h2:target {
background: #ff0000;
}

Стандарты

Этот псевдокласс определен в CSS 3 Selectors

Поддерживаемые браузеры

Firefox (Gecko) начиная с версии 1.0 (1.3)

Opera начиная с версии 9.5

Safari (WebKit) начиная с версии 3.1 (525)

Ссылки на источники

https://developer.mozilla.org/en/CSS/%3atarget

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования