From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/_colon_target/index.html | 211 ++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 files/ru/web/css/_colon_target/index.html (limited to 'files/ru/web/css/_colon_target/index.html') diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html new file mode 100644 index 0000000000..034a1f4b12 --- /dev/null +++ b/files/ru/web/css/_colon_target/index.html @@ -0,0 +1,211 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - Верстка + - Псевдоклассы +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

Псевдокласс  CSS  :target представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}}  URL-фрагментом.

+ +
/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
+:target {
+  border: 2px solid black;
+}
+ +

Для примера, следующий URL имеет фрагмент (обозначается знаком #), который указывает на элемент с именем section2:

+ +
http://www.example.com/index.html#section2
+ +

Следующий элмент будет выбран селектором :target, если текущий URL равен вышеуказанному:

+ +
<section id="section2">Example</section>
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

Таблица контента

+ +

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

+ +

HTML

+ +
<h3>Table of Contents</h3>
+<ol>
+ <li><a href="#p1">Jump to the first paragraph!</a></li>
+ <li><a href="#p2">Jump to the second paragraph!</a></li>
+ <li><a href="#nowhere">This link goes nowhere,
+   because the target doesn't exist.</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Добавление псевдоэлемента внутрь target-элемента */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Стиль italic-элементов без target-элемента */
+p:target i {
+  color: red;
+}
+ +

Результат

+ +
{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
+ +

Pure-CSS lightbox

+ +

Вы можете использовать псевдо-класс :target для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их  display на видимый.

+ +
Примечание: Более полный pure-CSS lightbox , основанный на псевдоклассе:target -  available on GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">Open example #1</a></li>
+  <li><a href="#example2">Open example #2</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* Закрываем lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Открываем lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Содержимое lightbox  */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Кнопка закрытия */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Обертка lightbox  */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Результат

+ +
{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Определена HTML-специфика семантики.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Без изменений.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Первое определение.
+ +

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

+ + + +
{{Compat("css.selectors.target")}}
+ +

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

+ + -- cgit v1.2.3-54-g00ecf