Содержание

Псевдокласс :target | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+1.0+3.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис

элемент:target { … }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>target</title>
  <style>
   h3:target {
    background: #fc0; /* Цвет фона */
    padding: 3px; 
   }
  </style>
 </head>
 <body>
  <ul>
    <li><a href="#h2">История 1</a></li>
    <li><a href="#h3">История 2</a></li>
  </ul>
  <h3>История 1</h3>
   <p>История о том, как необходимо было сделать могилу, 
   ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <h3>История 2</h3>
   <p>История о том, как возле столовой появились загадочные розовые
   следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Браузеры

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Использование псевдокласса :target в селекторах — Веб-технологии для разработчиков

Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

Выбор целевых элементов

Псевдокласс :target используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example. В HTML, идентификаторы определяются значениями атрибутов  id или name, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент «example» в документе.

Пердположим, вы хотите стилизовать любой элемент h3, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:

h3:target { font-weight: bold; }

Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту #example , напишем:

#example:target { border: 1px solid black; }

Отметка всех элементов, как целевых

Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:

:target { color: red; }

Пример

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки «First» , например, приведёт к тому, что  <h2> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

<h5>...</h5> <p>...</p>
<div>...</div> <a>...</a> <em>...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

Вывод

В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.

Original Document Information

  • Author(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Псевдокласс :target | CSS | WebReference

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис 

Селектор:target { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>target</title>
<style>
h3:target {
background: #fc0; /* Цвет фона */
padding: 3px;
}
</style>
</head>
<body>
<ul>
<li><a href=»#h2″>История 1</a></li>
<li><a href=»#h3″>История 2</a></li>
</ul>
<h3>История 1</h3>
<p>История о том, как необходимо было сделать могилу,
ее начали копать, а потом закапывать, и что из этого получилось.</p>
<h3>История 2</h3>
<p>История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.</p>
</body>
</html>

В данном примере целевой элемент выделяется цветом фона.

Примечание

В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

Псевдокласс :target | CSS — Примеры

Изменить внешний вид элемента при смене URL-адреса

Элементу задан атрибут id и некие стили CSS, в данном случае свойство border.

Образец

<style>
#raz {
  border: solid yellow;
}
#raz:target {
  border-color: green;
}
</style>
<div id="raz">Образец</div>

Если в адресной строке к URL добавить # (хэш-символ) с тем же значением, что id у элемента, то содержимое окна браузера без перезагрузки страницы промотается так, что первым будет виден верхний край рассматриваемого элемента. Меняют URL-адрес преимущественно не вручную, а с помощью ссылки или с помощью объекта Window.location (JavaScript).

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

Образец

<a href="#raz">Образец</a>

Для того, чтобы вернуть элемент к исходному виду, можно изменить часть URL после хэша на любую другую.

Образец

<a href="#razNo">Образец</a>

Разный стиль :target для одного тега

Тегу можно задать только один уникальный id.

Второй образец

Красный | Синий | Зелёный

<style>
#dvaRed:target {
  color: red;
}
#dvaBlue:target {
  color: blue;
}
#dvaGreen:target {
  color: green;
}
</style>
<div>
  <div>
    <div>
      Второй образец
    </div>
  </div>
</div>
<a href="#dvaRed">Красный</a> | <a href="#dvaBlue">Синий</a> | <a href="#dvaGreen">Зелёный</a>

Общий стиль :target для нескольких тегов

Третий образец

Третий образец

Третий образец

Первый DIV | Второй DIV | Третий DIV

<style>
.tri:target {
  color: red;
}
</style>
<div>Третий образец</div>
<div>Третий образец</div>
<div>Третий образец</div>
<a href="#tri1">Первый DIV</a> | <a href="#tri2">Второй DIV</a> | <a href="#tri3">Третий DIV</a>

Изменить нескольких тегов при переходе к одному id

Четвёртый образец

Четвёртый образец

Четвёртый образец

Все три DIV

<style>
#pyat:target,
#pyat:target ~ .pyat {  
  color: red;
}
</style>
<div>Четвёртый образец</div>
<div>Четвёртый образец</div>
<div>Четвёртый образец</div>
<a href="#pyat">Все три DIV</a>

Псевдокласс :target «без прыжков»

Когда полезна связь с URL, но не нужна перемотка к элементу. Например, для того, чтобы переправить посетителя к изначально открытой tab-вкладке (см. пункт «CSS Tabs, с переходом по щелчку»), раскрытой полностью таблице и т.п.

Пятый образец

Изменить цвет без прокрутки к DIV

<style>
#shest {
  position: fixed;
}
#shest:target ~ .shest {
  color: red;
}
</style>
<br>
<div>Пятый образец</div>
<a href="#shest">Изменить цвет без прокрутки к DIV</a>

Шестой образец раз два три

Шестой образец раз два три

11
12
13
21
22
23

<style>
[id^="sem"] {
  position: fixed;
}
[id^="sem1"]:target ~ .sem:nth-of-type(1),
[id^="sem2"]:target ~ .sem:nth-of-type(2) {
  background: green;
}
#sem11:target ~ .sem:nth-of-type(1) b:nth-of-type(1),
#sem12:target ~ .sem:nth-of-type(1) b:nth-of-type(2),
#sem13:target ~ .sem:nth-of-type(1) b:nth-of-type(3),
#sem21:target ~ .sem:nth-of-type(2) b:nth-of-type(1),
#sem22:target ~ .sem:nth-of-type(2) b:nth-of-type(2),
#sem23:target ~ .sem:nth-of-type(2) b:nth-of-type(3) {
  color: yellow;
}
</style>

<br><br><br><br><br><br>
<div><b>первый</b> <b>второй</b> <b>третий</b></div>
<div><b>первый</b> <b>второй</b> <b>третий</b></div>
<a href="#sem11">11</a>
<a href="#sem12">12</a>
<a href="#sem13">13</a>
<a href="#sem21">21</a>
<a href="#sem22">22</a>
<a href="#sem23">23</a>

Зачем нужен псевдокласс target в CSS3.

Вы здесь:
Главная — CSS — CSS3 — Зачем нужен псевдокласс target в CSS3.


В CSS3 появилось много нового, и сегодня мы разберем один из новых псевдоклассов — target.

Target с английского переводится как «цель» и это не просто так. Дело в том, что данный псевдокласс применяет какие-то стили к элементу, на который ссылаются. Объяснять это просто так нет смысла, лучше посмотрим сразу на пример.

К примеру, у нас есть такой HTML код:


<div>Какой-то текст</div>

Теперь мы можем сослаться на данный элемент из строки запроса

http://site.local/#id1

Таким образом мы сможем перейти к данному элементу.

Теперь рассмотрим пример с псевдоклассом target.


<a href="#id1">Ссылка</a>

<div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dignissimos odio eius, delectus autem facilis sunt vero ex, eum tempore excepturi harum voluptatem corporis modi, ducimus quam ab. Ipsa, officia.</p>

</div>

И пропишем для данного элемента стили
div p:target {
  color: green;
}

Теперь, при клике по ссылке, текст в параграфе станет зеленого цвета, т.к. вы начнете на него ссылаться.

Итак, вот такой простой псевдокласс target в CSS3, однако, он позволяет делать очень крутые вещи. Одну из таких мы разберем в следующей статье.

Спасибо за внимание и удачи!


  • Создано 02.09.2014 16:27:23



  • Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


  1. Кнопка:

    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт


  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Псевдоклассы СSS :not() и :target

Сегодня мы рассмотрим менее распространенные псевдоклассы CSS, которые поддерживаются в современных браузерах: child-indexed и typed child-indexed, а также псевдоклассы для элементов ввода input. Псевдоклассы child-indexed и typed child-indexed позволяют выделять элементы по их расположению в дереве документа. Псевдоклассы input определяют поля формы на основе их значений и состояний.

В этом случае идентификатор фрагмента является частью URL, который следует после хеша # (например, #top или #footnote1). Такое часто используется для организации навигации по странице при помощи так называемой «jump-link». С помощью псевдокласса :target можно подсветить фрагмент документа:

<section>
<h3>Comments on this post</h3>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

После нескольких штрихов и работы с CSS получается результат, который приведен ниже:

Каждый comment в коде обозначен идентификатором, который позволяет ссылаться на конкретный фрагмент. Например, <a href=»#comment-1146937891″>. Всё что остаётся – это стилизовать комментарий, используя псевдокласс CSS child :target:

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107
}

Когда идентификатор фрагмента в URL совпадает с комментарием (например, http://example.com/post/#comment-1146937891), он будет подсвечен жёлтым цветом, как показано ниже:

Псевдокласс CSS :target позволяет создавать комбинации, что открывает пространство для манёвров и позволяет не использовать JavaScript. Стилизуем наш пример с помощью CSS3. Для начала посмотрите на HTML-код:

<div>
<div>
	<a href="#tab1">Tab 1</a>
	<a href="#tab2">Tab 2</a>
	<a href="#tab3">Tab 3</a>
</div>

<ul>
	<li>
		<p>This is tab 1.</p>
	</li>
	<li>
		<p>This is tab 2</p>
	</li>
	<li>
		<p>This is tab 3.</p>
	</li>
</ul>
</div>

Здесь всё просто: три вкладки и контент с привязкой. Добавим CSS:

[id^=tab] {
    position: absolute;
}
[id^=tab]:first-child {
    z-index: 1;
}
[id^=tab]:target {
    z-index: 2;
}

Здесь и начинается волшебство. Сначала мы задаём вкладкам абсолютное позиционирование. Затем располагаем первую вкладку поверх контента при помощи свойства z-index: 1. Это важно, если при первом посещении пользователи должны видеть именно эту вкладку. Добавляем свойство z-index 1 к нашей вкладке target. Это гарантирует, что выделенный слой всегда будет расположен поверх остального контента. Результат представлен ниже:

В более доступной версии (в том числе и псевдоклассах CSS ссылок) можно использовать JavaScript для переключения атрибутов hidden и aria-hidden=true.

Клик по вкладке обновляет URL с использованием нового идентификатора фрагмента, после чего приводится в действие состояние :target.

Одним из самых многофункциональных считается псевдокласс :not(). Он возвращает все элементы, за исключением тех, которые совпадают с аргументом селектора. Например, p:not(.message) выделяет все элементы p без класса message.

Псевдокласс :not() принимает один аргумент, как и большинство функций в других языках программирования. Любой аргумент, заданный в :not(), должен быть простым селектором, названием класса или ID, другим псевдоклассом. Псевдоклассы не работают так, как составные селекторы типа label.checkbox или сложные селекторы типа p img.

Посмотрите на пример формы, в которой используется текстовые элементы ввода и radio buttons:

<form method="post" action="#">
  <h2>Join the Cool Kids Club</h2>
  <p>
	   <label for="name">Name:</label>
	   <input type="text" name="name" required>
  </p>

  <p>
	  <label for="email">Email:</label>
	  <input type="email" name="email" required>
  </p>
  <fieldset>
	<legend>Receive a digest?</legend>
	<p>
		<input type="radio" name="digest">
		<label for="daily">Daily</label>                
		<input type="radio" name="digest">
		<label for="weekly">Weekly</label>
	</p>
  </fieldset>
  <button type="submit">Buy Tickets!</button>
</form>

В HTML label, ассоциированные с элементами типа radio, имеют класс .label-radio. Можно использовать псевдокласс CSS нажатия :not() для выделения элементов, не имеющих класса label-radio, как это показано на картинке ниже:

label:not(.label-radio) {
  font-weight: bold;
  display:block;   
}

Рассмотрим более сложный пример. Используем стилизацию текстовых полей. Сюда входят элементы ввода number, email и text, а также password и url. Кроме этого мы исключим элементы radio, checkbox и range. Вам наверняка захочется воспользоваться следующим списком селектора:

([type=radio]),
input:not([type=checkbox]),
input:not([type=range]) {
  ...
}

К сожалению, это не поможет, так как каждый новый селектор переписывает предыдущий. Это всё равно, что писать:

input:not([type=radio]){ ... }
input:not([type=checkbox]) { ... }
input:not([type=range]) {... }

Вместо этого, нужно связать псевдоклассы :not() в цепочку, чтобы они отфильтровывали все элементы input:

input:not([type=radio]):not([type=checkbox]):not([type=range]) {
...
}

Приведённая цепочка селекторов также соответствует элементам [type=image], [type=reset], [type=color] и [type=submit]

Использование псевдоклассов и псевдоэлементов CSS без простого селектора эквивалентно его использованию с универсальным селектором. Другими словами, :not([type=radio]) – то же, что и *:not([type=radio]). В данном случае нашему критерию отвечает любой элемент без атрибута type и значения radio, включая html и body. Чтобы предотвратить это, используйте :not() с названием класса, ID или селектор атрибутов в качестве селектора.

В CSS-селекторах Level 4 изменен принцип работы :not(), так что, теперь он принимает в качестве аргумента не только простые селекторы, но и списки. Вместо того чтобы связывать классы, как это делалось раньше, можно указывать аргументы через запятую:

input:not([type=radio], [type=checkbox], [type=range]) {
...
}

К сожалению, пока далеко не все браузеры поддерживают этот вариант, поэтому мы рекомендуем и дальше использовать цепочки.

Данная публикация представляет собой перевод статьи «CSS Pseudo-classes: :not() and :target» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

Псевдоклассы CSS: :not и :target

От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Ранее в этой главе мы уже говорили, что псевдоклассы позволяют задавать стили на основе информации, которую невозможно получить из дерева документа и на которую нельзя сослаться с помощью простых селекторов. К ним относятся логические и лингвистические псевдоклассы типа :not и :lang(), а также псевдоклассы, срабатывающие на пользовательские события, типа :hover и :focus.

В этом разделе мы рассмотрим тайные и малоизвестные псевдоклассы с упором на то, что есть в браузерах: дочерние и типизированные дочерние псевдоклассы, а также псевдоклассы ввода. Дочерние обычные и дочерние типизированные псевдоклассы позволяют выбирать элементы на основе их позиции в поддереве документа. Псевдоклассы ввода выбирают поля форм по их значениям и состояниям.

Выделение фрагментов страницы с помощью :target

Идентификатор фрагмента – это та часть URL, которая идет после символа #. Например, #top или #footnote1. Вы могли их использовать для создания внутренней навигации по странице – так называемые якоря. С помощью :target можно выделить часть документа, относящуюся к этому фрагменту. И тут совсем не нужен JS.

Например, у вас есть несколько комментариев или ветка дискуссионного клуба:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<section>
<h3>Comments on this post</h3>
<article>…</article>
<article>…</article>
<article>…</article>
</section>

<section>

<h3>Comments on this post</h3>

<article>…</article>

<article>…</article>

<article>…</article>

</section>

Добавим немного CSS и всяких украшений, и страница будет выглядеть примерно так.

У каждого комментария в коде выше есть свой идентификатор фрагмента. То есть на каждый комментарий можно получить прямую ссылку. Например, <a href=»#comment-1146937891″>. Осталось лишь задать стили комментария с помощью псевдокласса :target:

.comment:target {
background: #ffeb3b;
border-color: #ffc107
}

.comment:target {

  background: #ffeb3b;

  border-color: #ffc107

}

Когда в URL есть идентификатор фрагмента, ссылающийся на комментарий (например, http://example.com/post/#comment-1146937891), комментарий будет выделяться желтым фоном, как на скриншоте ниже.

С :target можно использовать любые стили, что позволяет создавать вкладки без подключения JS. Craig Buckler подробно описал эту технику в своем уроке «как создать вкладки на чистом CSS3 с помощью селектора :target». Мы немного освежим его способ, добавим чуть больше CSS3 свойств. Во-первых, давайте взглянем на наш HTML:

<div>
<div>
<a href=»#tab1″>Tab 1</a>
<a href=»#tab2″>Tab 2</a>
<a href=»#tab3″>Tab 3</a>
</div>

<ul>
<li>
<p>This is tab 1.</p>
</li>
<li>
<p>This is tab 2</p>
</li>
<li>
<p>This is tab 3.</p>
</li>
</ul>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<div>

<div>

  <a href=»#tab1″>Tab 1</a>

  <a href=»#tab2″>Tab 2</a>

  <a href=»#tab3″>Tab 3</a>

</div>

 

<ul>

  <li>

    <p>This is tab 1.</p>

  </li>

  <li>

    <p>This is tab 2</p>

  </li>

  <li>

    <p>This is tab 3.</p>

  </li>

</ul>

</div>

Довольно простая разметка. Тут есть вкладки и контент для них. Добавим CSS:

[id^=tab] {
position: absolute;
}
[id^=tab]:first-child {
z-index: 1;
}
[id^=tab]:target {
z-index: 2;
}

[id^=tab] {

    position: absolute;

}

[id^=tab]:first-child {

    z-index: 1;

}

[id^=tab]:target {

    z-index: 2;

}

А вот тут и кроется вся магия. Наши вкладки имеют абсолютное позиционирование. Дальше мы помещаем первую вкладку на самый верх с помощью z-index: 1. Данное свойство делает первую вкладку видимой по умолчанию. В конце мы добавляем z-index: 1 к нашей целевой вкладке. Так нужная нам вкладка всегда будет лежать поверх остальных. Результат представлен на скриншоте ниже.

Совет: повышение доступности

Для большей доступности можно использовать JS, с помощью которого будет устанавливаться атрибут hidden или aria-hidden=true в зависимости от видимости вкладок.

Клик по вкладке обновляет идентификатор фрагмента в URL, что в свою очередь вызывает состояние :target.

Вычитание селекторов с помощью :not()

Псевдокласс :not(), возможно, самый мощный из новых. Он возвращает все элементы кроме тех, которые указаны в аргументе. Например, p:not(.message) выберет все теги p без класса message.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Псевдокласс :not() также известен как функциональный псевдокласс. Он принимает один аргумент, как функции в других языках программирования. Передаваемый в :not() аргумент должен быть простым селектором: тип элемента, класс, ID или другой псевдокласс. Псевдокласс не сработает, если будет передан составной селектор типа label.checkbox или сложный селектор типа p img.

Пример формы с текстовыми полями и радиокнопками:

<form method=»post» action=»#»>
<h2>Join the Cool Kids Club</h2>
<p>
<label for=»name»>Name:</label>
<input type=»text» name=»name» required>
</p>

<p>
<label for=»email»>Email:</label>
<input type=»email» name=»email» required>
</p>
<fieldset>
<legend>Receive a digest?</legend>
<p>
<input type=»radio» name=»digest»>
<label for=»daily»>Daily</label>
<input type=»radio» name=»digest»>
<label for=»weekly»>Weekly</label>
</p>
</fieldset>
<button type=»submit»>Buy Tickets!</button>
</form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<form method=»post» action=»#»>

  <h2>Join the Cool Kids Club</h2>

  <p>

     <label for=»name»>Name:</label>

     <input type=»text» name=»name» required>

  </p>

  <p>

    <label for=»email»>Email:</label>

    <input type=»email» name=»email» required>

  </p>

  <fieldset>

  <legend>Receive a digest?</legend>

  <p>

    <input type=»radio» name=»digest»>

    <label for=»daily»>Daily</label>                

    <input type=»radio» name=»digest»>

    <label for=»weekly»>Weekly</label>

  </p>

  </fieldset>

  <button type=»submit»>Buy Tickets!</button>

</form>

В HTML выше лейблы, относящиеся к типу radio, имеют класс .label-radio. С помощью псевдокласса :not() можно выбрать элементы без класса label-radio, как показано на скриншоте ниже:

label:not(.label-radio) {
font-weight: bold;
display:block;
}

label:not(.label-radio) {

  font-weight: bold;

  display:block;  

}

Этот пример поинтереснее. Давайте стилизуем текстовые поля. К таким полям относятся инпуты с типом number, email, text, password и url. Но давайте сделаем это, исключив из выборки радиокнопки, чекбоксы и ползунки. Первое, что может прийти в голову:

([type=radio]),
input:not([type=checkbox]),
input:not([type=range]) {
…
}

([type=radio]),

input:not([type=checkbox]),

input:not([type=range]) {

  …

}

Но это не сработает, так как каждый селектор будет переписывать предыдущий. Это эквивалент такой записи:

input:not([type=radio]){ … }
input:not([type=checkbox]) { … }
input:not([type=range]) {… }

input:not([type=radio]){ … }

input:not([type=checkbox]) { … }

input:not([type=range]) {… }

Вместо этого необходимо сцепить псевдоклассы :not(), чтобы они все фильтровали поля input.

input:not([type=radio]):not([type=checkbox]):not([type=range]) {
…
}

input:not([type=radio]):not([type=checkbox]):not([type=range]) {

…

}

Использовать псевдокласс или псевдоэлемент без простого селектора – это то же самое, что использовать его с универсальным селектором. То есть запись :not([type=radio]) равна *:not([type=radio]). В таком случае в выборку попадут все элементы без атрибута type и значения radio, в том числе html и body. Чтобы исключить это, используйте :not() с классом, ID или селектором атрибута. Кстати, это касается и классов, ID и селекторов атрибутов: .warning и [type=radio] равны *.warning и *[type=radio] соответственно.

Спецификация CSS Selectors Level 4 улучшает принцип работы :not(). Теперь он может принимать список аргументов, а не просто селекторы. Вместо сцепки можно использовать запятую в качестве разделителя в аргументе:

input:not([type=radio], [type=checkbox], [type=range]) {
…
}

input:not([type=radio], [type=checkbox], [type=range]) {

…

}

К сожалению, этот синтаксис на данный момент не поддерживается ни в одном браузере. Пока что пользуйтесь сцепкой.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Использование псевдокласса: target в селекторах — Веб-технологии для разработчиков

Когда URL-адрес указывает на конкретную часть документа, пользователю может быть трудно заметить. Узнайте, как можно использовать простой CSS, чтобы привлечь внимание к цели URL-адреса и улучшить взаимодействие с пользователем.

Выбор цели

Псевдокласс : target используется для стилизации целевого элемента URL-адреса, содержащего идентификатор фрагмента. Например, URL-адрес http: // developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example . В HTML идентификаторы находятся в виде значений атрибутов id или name , поскольку они используют одно и то же пространство имен. Таким образом, URL-адрес примера будет указывать на заголовок «пример» в этом документе.

Предположим, вы хотите стилизовать любой элемент h3 , который является целью URL-адреса, но не хотите, чтобы какой-либо другой тип элемента получил целевой стиль.Это достаточно просто:

 h3: target {font-weight: bold; }

Также можно создавать стили, специфичные для определенного фрагмента документа. Это делается с использованием того же идентификационного значения, что и в URI. Таким образом, чтобы добавить границу к фрагменту #example , мы должны написать:

 #example: target {border: 1px сплошной черный; }

Нацелены на все элементы

Если намерение состоит в том, чтобы создать «общий» стиль, который будет применяться ко всем целевым элементам, тогда пригодится универсальный селектор:

: цель {цвет: красный; }

Пример

В следующем примере пять ссылок указывают на элементы в одном документе.Выбор ссылки «Первая», например, приведет к тому, что

станет целевым элементом. Обратите внимание, что документ может перейти в новую позицию прокрутки, так как целевые элементы размещаются в верхней части окна браузера, если это возможно.

 
 ... 
 
 ... 


 ... 
  ...   ... 

 Первый 
 Второй 
 Третий 
 Четвертый 
 Пятое

Заключение

В случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую часть документа они должны читать.Путем стилизации цели URI можно уменьшить или устранить путаницу у читателя.

Информация об исходном документе

  • Автор (ы): Эрик Мейер, евангелист стандартов, Netscape Communications
  • Оригинальная информация об авторских правах: Copyright © 2001-2003 Netscape. Все права защищены.
  • Примечание. Эта перепечатанная статья изначально была частью сайта DevEdge.

.

Псевдоклассы — Веб-технологии для разработчиков

Псевдокласс CSS — это ключевое слово, добавляемое к селектору, определяющее особое состояние выбранных элементов. Например, : hover можно использовать для изменения цвета кнопки при наведении на нее указателя пользователя.

 / * Любая кнопка, над которой находится указатель пользователя * /
button: hover {
  цвет синий;
}

Псевдоклассы

позволяют применять стиль к элементу не только по отношению к содержимому дерева документа, но и по отношению к внешним факторам, таким как история навигатора (например, : посетил ), статус его содержимое (например, : проверено для определенных элементов формы) или положение мыши (например, : hover , которое позволяет узнать, находится ли указатель мыши над элементом или нет).

Примечание: В отличие от псевдоклассов, псевдоэлементы могут использоваться для стилизации определенной части элемента .

Синтаксис

Селектор

: псевдокласс {
  стоимость имущества;
}

Как и обычные классы, вы можете объединить в один селектор столько псевдоклассов, сколько захотите.

Указатель стандартных псевдоклассов

Технические характеристики

Спецификация Статус Комментарий
Полноэкранный режим API Жилой стандарт Определено : полноэкранный .
HTML Living Standard Жилой стандарт Определяет, когда определенные селекторы соответствуют элементам HTML.
Селекторы уровня 4 Осадка рабочий Defined : any-link , : blank , : local-link , : scope , : drop , : current , : past , : future , : placeholder- показано , : недействительный пользователь , : nth-col () , : nth-last-col () , : is () и : где () .
Изменено : пусто , чтобы вести себя как : -moz-only-whitespace .
Нет значительных изменений для других псевдоклассов, определенных в Selectors Level 3 и HTML5 (хотя семантическое значение не принимается).
HTML5 Рекомендация Копирует соответствующий раздел из канонической (WHATWG) спецификации HTML.
Модуль базового пользовательского интерфейса CSS, уровень 3 Рекомендация Определено : по умолчанию , : верно , : недействительно , : в пределах , : вне диапазона , : обязательно , : необязательно , : только для чтения и : чтение-запись , но без связанного семантического значения.
Селекторы уровня 3 Рекомендация Определено : цель , : root , : nth-child () , : nth-last-of-child () , : nth-of-type () , : nth-last -of-type () , : последний ребенок , : первый тип , : последний тип , : единственный ребенок , : только тип , : пусто и : нет () .
Определяет синтаксис : включен , : выключен , : проверен и : неопределенный , но без соответствующего семантического значения.
Нет значительных изменений для псевдоклассов, определенных в CSS Level 2 (Revision 1).
CSS, уровень 2 (редакция 1) Рекомендация Определено : lang () , : first-child , : hover и : focus .
Нет значительных изменений для псевдоклассов, определенных в CSS Level 1.
Уровень CSS 1 Рекомендация Определено : ссылка , : посещена и : активна , но без связанного семантического значения.

См. Также

.

CSS Псевдоклассы

Что такое псевдоклассы?

Псевдокласс используется для определения особого состояния
элемента.

Например, его можно использовать для:

  • Стиль элемента, когда пользователь наводит на него курсор
  • Различный стиль посещенных и непосещенных ссылок
  • Стиль элемента, когда он получает фокус

Синтаксис

Синтаксис псевдоклассов:

селектор: псевдокласс {
свойство: значение;
}

Псевдоклассы якоря

Ссылки могут отображаться по-разному:

Пример

/ * непосещенная ссылка * /
a: link {
color: # FF0000;
}

/ * посетил
ссылка * /
a: посетил {
color: # 00FF00;
}

/ * наведение курсора мыши на ссылку * /
a: hover {
color: # FF00FF;
}

/ * выбранная ссылка * /
a: активная {
цвет: # 0000FF;
}

Попробуй сам »

Примечание: a: hover ДОЛЖЕН идти после a: link и
a: посетил в определении CSS, чтобы быть эффективным! a: активный ДОЛЖЕН быть после
a: наведите указатель мыши на в определении CSS для повышения эффективности!
Имена псевдоклассов не чувствительны к регистру.

Псевдоклассы и классы CSS

Псевдоклассы можно комбинировать с классами CSS:

Когда вы наводите курсор на ссылку в примере, она меняет цвет:

Наведите курсор на

Пример использования псевдокласса : hover в элементе

:

Простая всплывающая подсказка

Наведите указатель мыши на элемент

, чтобы отобразить элемент

(например, всплывающую подсказку):

Наведите указатель мыши на меня, чтобы показать элемент

.

Тада! А вот и я!

Пример

p {
дисплей: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}

div: hover p {
display: block;
}

Попробуй сам »

CSS — Псевдо-класс: first-child

Псевдокласс : first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента.

Соответствует первому элементу

В следующем примере селектор соответствует любому элементу

, который является первым дочерним элементом любого элемента:

Соответствует первому элементу во всех элементах

В следующем примере селектор соответствует первому элементу во всех элементах

:

Сопоставить все элементы во всех первых дочерних элементах

В следующем примере селектор соответствует всем элементам в элементах

, которые являются первым дочерним элементом другого элемента:

CSS — Псевдокласс: lang

Псевдокласс : lang позволяет определять специальные правила для разных языков.

В приведенном ниже примере : lang определяет кавычки для элементов с lang = «no»:

.

Пример

q: lang (no) {
цитаты: «~» «~»;
}

Некоторый текст Цитата в абзаце
Немного текста.


Попробуй сам »

Другие примеры

Добавить разные стили к гиперссылкам
В этом примере показано, как добавить к гиперссылкам другие стили.

Использование: focus
Этот пример демонстрирует, как использовать псевдокласс: focus.

Проверьте себя упражнениями!

Все псевдоклассы CSS

Селектор Пример Описание примера
: активный a: активный Выбирает активную ссылку
: проверен ввод: проверен Выбирает каждый отмеченный элемент
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто п: пусто Выбирает каждый элемент

, не имеющий дочерних элементов

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

, который является первым дочерним элементом своего родительского элемента

: первый в своем роде п: первоклассный Выбирает каждый элемент

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

его родительского элемента

: фокус ввод: фокус Выбирает элемент с фокусом
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах ввод: в пределах Выбирает элементы со значением в указанном диапазоне
: недопустимый ввод: недопустимый Выбирает все элементы с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

, значение атрибута lang которого начинается с «it».

: последний ребенок р: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя.

: последний тип п: последний тип Выбирает каждый элемент

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

его родительского элемента

: ссылка а: ссылка Выбирает все непосещенные ссылки
: нет (селектор): нет (р) Выбирает каждый элемент, который не является элементом

: nth-child (n) p: nth-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родительского элемента

: nth-последний-ребенок (n) p: nth-last-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type (n) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родителя, считая от последнего дочернего элемента

: nth-of-type (n) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родительского элемента

: только тип p: только-типа Выбирает каждый элемент

, который является единственным элементом

его родительского элемента

: только ребенок p: только ребенок Выбирает каждый элемент

, который является единственным дочерним элементом своего родителя.

: опционально ввод: опционально Выбирает элементы без атрибута «required»
: вне допустимого диапазона вход: вне допустимого диапазона Выбирает элементы со значением вне указанного диапазона
: только чтение вход: только для чтения Выбирает элементы с указанным атрибутом «только для чтения»
: чтение-запись ввод: чтение-запись Выбирает элементы без атрибута «только для чтения»
: требуется ввод: требуется Выбирает элементы с указанным атрибутом «required»
: корень корень Выбирает корневой элемент документа
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действительный Выбирает все элементы с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

Все псевдоэлементы CSS

Селектор Пример Описание примера
:: после р :: после Вставлять содержимое после каждого элемента

:: до р :: до Вставлять содержимое перед каждым элементом

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

:: выбор р :: подборка Выбирает часть элемента, выбранную пользователем

.

Справочник по селекторам CSS

Селектор Пример Описание примера
. класс .intro Выбирает все элементы с помощью
.class1.class2 .name1.name2 Выбирает все элементы с name1 и name2 set
в пределах своего атрибута класса
.класс1. класс2 .name1 .name2 Выбирает все элементы с именем 2 , который является потомком
элемент с именем 1
# id # имя Выбирает элемент с помощью
* * Выбирает все элементы
элемент p Выбирает все элементы

элемент.класс p.intro Выбирает все элементы

с

элемент, элемент div, p Выбирает все элементы

и все элементы

элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает все элементы

, которые помещаются сразу после элементов

элемент1 ~ элемент2 p ~ ul Выбирает каждый элемент

    , которому предшествует элемент

[ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
[ атрибут = значение ] [target = _blank] Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ] [название ~ = цветок] Выбирает все элементы с атрибутом title, содержащим слово «цветок».
[ атрибут | = значение ] [lang | = en] Выбирает все элементы со значением атрибута lang, начинающимся с «en»
[ атрибут ^ = значение ] a [href ^ = «https»] Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $ = значение ] а [href $ = «.pdf »] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ] a [href * = «w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».
: активный a: активный Выбирает активную ссылку
:: после ч :: после Вставить что-нибудь после содержимого каждого элемента

:: до p :: до Вставить что-нибудь перед содержимым каждого элемента

: проверено ввод: проверено Выбирает каждый проверенный элемент
: по умолчанию ввод: по умолчанию Выбирает элемент по умолчанию
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто p: пусто Выбирает каждый элемент

, не имеющий дочерних элементов (включая текстовые узлы).

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

, который является первым дочерним элементом своего родительского

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

.

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

: первый в своем роде р: первый в своем роде Выбирает каждый элемент

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

его родительского

: фокус ввод: фокус Выбирает элемент ввода, имеющий фокус
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах вход: в диапазоне Выбирает элементы ввода со значением в указанном диапазоне
: неопределенный ввод: неопределенный Выбирает элементы ввода, находящиеся в неопределенном состоянии
: недействительно ввод: недопустимый Выбирает все элементы ввода с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

с атрибутом lang, равным «it» (итальянский)

: последний ребенок p: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя

: последняя машина p: последний тип Выбирает каждый элемент

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

его родительского

: ссылка а: ссылка Выбирает все непосещенные ссылки
: нет ( селектор ): нет (p) Выбирает каждый элемент, не являющийся элементом

: nth-ребенок ( n ) p: nth-ребенок (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родительского

: nth-последний-ребенок ( n ) p: nth-last-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type ( n ) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родительского элемента, считая от последнего дочернего элемента

: nth-of-type ( n ) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

его родительского

: только тип p: одинарный Выбирает каждый элемент

, который является единственным элементом

его родительского

: только ребенок p: только ребенок Выбирает каждый элемент

, который является единственным дочерним элементом своего родительского

: опционально вход: опционально Выбирает элементы ввода без атрибута «обязательный»
: вне допустимого диапазона вход: вне диапазона Выбирает элементы ввода со значением вне указанного диапазона
:: заполнитель input :: заполнитель Выбирает элементы ввода с указанным атрибутом «заполнитель».
: только для чтения вход: только для чтения Выбирает элементы ввода с указанным атрибутом «только для чтения».
: чтение-запись вход: чтение-запись Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения».
: требуется ввод: требуется Выбирает элементы ввода с указанным атрибутом «required»
: корень: корень Выбирает корневой элемент документа
:: выбор :: выбор Выбирает часть элемента, выбранную пользователем
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действителен Выбирает все элементы ввода с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

.

Разное

Previous post
Вебмани рег: Настройка платёжных систем в REG.Panel | REG.RU
Next post
Копирайтинг и рерайтинг что это такое: Рерайтинг и копирайтинг — сходства и отличия

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *