Css target link with href

CSS :target Pseudo Class

The :target pseudo-class is used to highlight the section of a page linked to from a table of contents. It styles an element that is the target of an internal link in a document.

The :target pseudo-class represents the target element with an id matching the URL’s fragment.

Pure-CSS lightbox

The :target pseudo-class is used to create a lightbox without any JavaScript part. This method uses the ability of anchor links to point to those elements that are hidden on the page, by default. When they are targeted, CSS changes their display so as to be shown.

Version

Syntax

Example of the :target selector:

html> html> head> title>Title of the document title> style> :target < border: 2px solid #1c87c9; background-color: #eeeeee; > style> head> body> h2>:target selector example h2> p> a href="#example1">Jump to Paragraph 1 a> p> p> a href="#example2">Jump to Paragraph 2 a> p> p id="example1"> strong>Paragraph 1 strong> p> p id="example2"> strong>Paragraph 2 strong> p> body> html>

Example of using the :target psudo-class to create a tabbed menu:

html> html> head> style> .tab-menu div < display: none; background-color: #f5f5f5; padding: 0 20px 20px; > .tab-menu a < text-decoration: none; padding: 10px; margin: 20px 0; display: inline-block; > .tab-menu div:target < display: block; > style> head> body> h1>:target selector example h1> div class="tab-menu"> a href="#html">HTML a> a href="#css">CSS a> a href="#php">PHP a> div id="html"> h2> a href="https://www.w3docs.com/learn-html.html">Lean HTML a> h2> p>HTML-Hyper Text Markup Language p> div> div id="css"> h2> a href="https://www.w3docs.com/learn-css.html">Learn CSS a> h2> p>CSS-Cascading Style Sheets p> div> div id="php"> h2> a href="https://www.w3docs.com/learn-php.html">Learn PHP a> h2> p>PHP-Hyertext Preprocessor p> div> div> body> html>

Example of using the :target pseudo-class to create a modal box:

html> html> head> style> h1+a < text-decoration: none; padding: 10px 20px; background-color: #8ebf42; color: #ffffff; font-family: sans-serif; > /* Add animation (Chrome, Safari, Opera) */ @-webkit-keyframes example < from < top: -100px; opacity: 0; > to < top: 0px; opacity: 1; > > /* Add animation (Standard syntax) */ @keyframes example < from < top: -100px; opacity: 0; > to < top: 0px; opacity: 1; > > /* The modal's background */ .modal < display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); > /* Display the modal when targeted */ .modal:target < display: table; position: absolute; > /* The modal box */ .modal-dialog < display: table-cell; vertical-align: middle; > /* The modal's content */ .modal-dialog .modal-content < margin: auto; background-color: #f3f3f3; position: relative; padding: 0; outline: 0; border: 1px #777 solid; text-align: justify; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* Add animation */ -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 0.5s; > /* The button used to close the modal */ .closebtn < text-decoration: none; float: right; font-size: 35px; font-weight: bold; color: #fff; > .closebtn:hover, .closebtn:focus < color: #000; text-decoration: none; cursor: pointer; > .container < padding: 2px 16px; text-align: center; line-height: 1.6; > header < background-color: #337ab7; font-size: 25px; color: white; > header h2 < text-align: left; > footer < background-color: #337ab7; font-size: 20px; color: white; > footer p < text-align: right; > style> head> body> h1>:target selector example h1> a href="#modal">Open Modal a> div id="modal" class="modal"> div class="modal-dialog"> div class="modal-content"> header class="container"> a href="#" class="closebtn">× a> h2>Header h2> header> div class="container"> p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p> div> footer class="container"> p>Footer p> footer> div> div> div> body> html>

There is a slight difference between modal boxes and lightboxes. Lightboxes can be closed by clicking outside the pop-up, while modal boxes can only be closed by interacting inside the pop-up.

Example of using the :target pseudo-class to create a lightbox:

html> html> head> style> h1+a < background-color: #8ebf42; padding: 20px 40px; color: #ffffff; text-decoration: none; font-size: 20px; margin: 15px 0; display: inline-block; > /* Unopened lightbox */ .lightbox < display: none; > /* Opened lightbox */ .lightbox:target < position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; > /* Lightbox content */ .lightbox figcaption < width: 25rem; position: relative; padding: 1.5em; background-color: #8ebf42; > /* Close button */ .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 overlay */ .lightbox .close::before < left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, .7); content: ""; cursor: default; > style> head> body> h1>:target selector example h1> a href="#lightbox">Open Lightbox a> div class="lightbox" id="lightbox"> 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> body> html>

Browser support

Источник

:target¶

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

Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Синтаксис¶

/* Selects an element with an ID matching the current URL's fragment */ :target  border: 2px solid black; > 

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

Примеры¶

Пример 1¶

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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

Пример 2¶

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

h3>Table of Contentsh3> 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 Articleh3> p id="p1"> You can target i>this paragraphi> using a URL fragment. Click on the link above to try out! p> p id="p2"> This is i>another paragraphi>, also accessible from the links above. Isn't that delightful? p> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

p:target  background-color: gold; > /* Add a pseudo-element inside the target element */ p:target::before  font: 70% sans-serif; content: '►'; color: limegreen; margin-right: 0.25em; > /* Style italic elements within the target element */ p:target i  color: red; > 

Пример 3¶

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

ul> li>a href="#example1">Open example #1a>li> li>a href="#example2">Open example #2a>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> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

/* Unopened lightbox */ .lightbox  display: none; > /* Opened lightbox */ .lightbox:target  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; > /* Lightbox content */ .lightbox figcaption  width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; > /* Close button */ .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 overlay */ .lightbox .close::before  left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.7); content: ''; cursor: default; > 

Ссылки¶

Источник

HTML target Attribute

The target attribute specifies where to open the linked document:

Definition and Usage

The target attribute specifies where to open the linked document.

Browser Support

Syntax

Attribute Values

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in the named iframe

❮ HTML tag

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник