What is target in css. Pure CSS click event without :target

You can easily find many tutorials on the web using the :target pseudo-class. However, let's not follow someone else's code, but try to understand it and understand how it works? Of course, it will not do without examples.

What is :target?

In CSS:target is a pseudo-class that allows you to select some whole "piece" of your HTML document on which to perform some action. It can be a paragraph of text or a heading, for example.

Pseudo-classes should not be confused with pseudo-elements, which can select only some part of an element, such as the first letter or the first line of a paragraph.

Pseudo classes:

• a:link(color:#111)
• a:hover(color:#222)
• div:first-child(color:#333)

• p::first-letter(color:#444)
• p::first-line(color:#555)

Fragment IDs

In short, this is such a thing to which our pseudo-class is tied. This is a hashtag with a word or phrase that is placed at the end of the address. It looks like this:

This technique can be used for transitions within an article. For example, at the beginning of an article, you create a small table of contents, when clicking on an element of which a person gets to the section where the link leads, the section, while you need to add an identifier.

It works in pure HTML, no tricks required. Small IDs.

Handling a click with :target

Now let's try to make it so that when you click on the desired section from our impromptu menu, the heading style changes, showing which of the paragraphs is currently active.

h1 ( font: 30px Arial sans-serif; ) h1:target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

The code is very simple - when clicked, the title changes its size, color and underline. You can add life (Ruslan, hello) and make an animation of changing the title color:

H1 ( font: 30px Arial sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; )

Highlighting an active title is a good thing, but what if you need to change the appearance of the text following it? CSS gives us that ability. It looks like this:

H1:target + p ( background: #eaeaea; padding: 10px; )

In this case, plus means that the style should be applied to the paragraph following the heading. In this way, when changing the active title, we change the design of the section with the text that "belongs" to him.

Browser Support

The target pseudo-class belongs to the third edition of CSS and is perfectly supported by all browsers, except for IE older than version 9. Therefore, you should not implement it if your audience uses this browser. Although, there is a way out - this is Selectvizr, a JS library with which you can make IE work with CSS3. Just add the script and that's it, it works.

The only thing, if you do not use JQuery or MooTools, you need to connect for this script to work. There is a table on the official website which libraries support what. If you're interested, read it. This .

Conclusion

Using pseudo-classes can seem like a daunting task, but once you understand how they work, you can do amazing things with just CSS and nothing else. Pseudo-class:target is an excellent confirmation of this. With it, you can radically change the interaction of the page with the visitor. The example above is the simplest, but it also adds a bit of interactivity to the page. And it's just a couple of lines of code.

Do not overdo it with beauty and browser support and everything will be fine.

Have a nice day

By default, when you click on a link, the document opens in the current window or frame. If necessary, this condition can be changed by the target attribute of the tag . XHTML does not allow this attribute.

Required attribute

Values

The value is the name of the window or frame specified by the name attribute. If a non-existent name is set, a new window will open. The following are used as reserved names.

Blank Loads the page into a new browser window. _self Loads a page into the current window. _parent Loads the page into the parent frame, if there are no frames then this value works like _self . _top Cancels all frames and loads the page in a full browser window, if there are no frames then this value works like _self .

Default value

Validation

The use of this attribute is deprecated by the HTML specification, valid code is only obtained when using a transitional .

HTML5 IE Cr Op Sa Fx

Open in new window

Hello, dear readers of the blog site. I decided to dedicate today's post important aspect webmastering, where I will try to explain in detail what a hyperlink is, inextricably linked with, which, in turn, without exaggeration, is the basis of the Internet.

But in order to correctly create hyperlinks and insert them into the code of web pages (for example, your site), you need to study the corresponding area of ​​​​the language hypertext markup() because these elements are formed using the HTML a tag, which has a , allowing you to modernize the link to the desired look.

So, today we will analyze what parts a hyperlink consists of, how using the target blank attribute makes it possible to open a page in a new window (tab), how to make any image a link, and many other important details. Among other things, this information will advance you in learning the HTML language.

What is a hyperlink and can it be called a link?

Answering the question posed in the title, I will say that the term “link” has a wider semantic spectrum (link to Siberia, banking to identify the payer, text in the book, etc.), including the meaning inherent in the concept of “hyperlink” , which is associated only with hypertext, which makes it possible to perceive information non-linearly.

In this way, a hyperlink is a special case of a link, so it is quite possible to use them in today's topic on an equal footing. This is what I will use to my own selfish interests in the course of today's publication, using both of these terms to avoid unnecessary keyword spam.

But there are also invisible service ones created with the help of and those within , whose task is to send numerous signals and commands to browsers to perform a particular function.

For example, with the help of service hyperlinks it is possible to display an icon . They can only be seen as part of the HTML code (to do this, click on any page open in the browser):

For now, let's leave service links alone and consider the general pattern of creating hyperlinks. What they have in common is that they all have required href attribute, whose value is the address of the document (). An HTML link can lead to either inner page site, and on an external document.

One more important note. The use of the href attribute makes hyperlinks clickable, that is, it allows users to automatically go to the corresponding page of the website as a result of clicking on them.

How to make a hyperlink in HTML using href

So, we already know that to create a link, the a tag and the href attribute are required, the parameters of which can be URLs different kind. Insofar as a this, then between the opening and closing contains the content that will be displayed on the web page.

This content is called anchor and can be presented as text or an image (we’ll talk more about how to make an image a link below). As I already noted, the anchor will be clickable. Consider an example of a hyperlink with text content. Here's what it would look like in HTML code:

a little about anchors

In addition to HTTP, secure HTTP protocol S. The link does not have to lead to a web page. It all depends on the href value, which can be the path to some file:

//website/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

download

On a web page, this link will look like this:

The browser "understands" that an object with the .zip extension can only be used for downloading, which it suggests to the user.

By the way, the path to any file is sometimes specified through FTP (). Then, in the URL that is used as a parameter of the href attribute, you should simply replace the HTTP protocol (HTTPS) with FTP. The link to the file will look like this:

download from server

But that's not all. In a similar way a link is created to email using pseudo-protocol mailto for quick access to the writing tool:

write letters

After clicking on such a link, a window of the default one should appear. mail client, in which you can compose the text of the message and send it to the already specified address, taken, you guessed it, from href.

In practice, hyperlinks to mail were very often used by webmasters and owners of large resources in the past to ensure the convenience of users and customers who can access the mail form with one click.

But this type of communication on web resources is no longer so popular (especially since you can install, for example,), because the mail addresses opened in this way are actively intercepted using software and used by various kinds of spammers.

I have cited as an example only the most common protocols that are part of the URL, which, in turn, is a parameter of the href attribute when forming a hyperlink. In addition to HTTP (HTTPS), FTP, and mailto, there are others for more specific tasks. Perhaps we will consider them in more detail in other publications.

Types of hyperlinks

And now let's try to classify links according to certain criteria.

According to their scope:

1. External- lead to pages located outside the site on which they are placed;

2. Internal- link web pages within the same web resource.

By format:

2. Graphically f — in this case, the anchor of the hyperlink is an image (including a thumbnail), a banner, a button, etc.

By the type of URL serving as the value of the href attribute:

1. Absolute, which contain an explicit indication of the data transfer protocol (for example, HTTP) and Domain name site (in all about domains).

Such links are more often used when linking to pages of external resources. In this case, the href value will include the full path to desired file or web pages. Here is an example of an absolute hyperlink:

Context - what is it

2. relative, one of the options for creating which will be the path specified relative to the root folder of the website (hence the name of this type of hyperlink). In this case, the protocol (HTTP) and the site domain will be removed from the URL:

Context - what is it

Relative hyperlinks on a web page can provide links to internal pages. In this form, they are shorter, which makes the HTML code easier. Of course, everything is not so simple, and requires a wider coverage, as you can see if you follow the link provided.

a tag attributes

Now let's see what other attributes, besides the obligatory href, exist, and how they can affect the creation of a hyperlink. You can find the most complete data in this regard, so to speak, "first-hand" on the official website of the International Consortium W3C, where up-to-date information appears most quickly.

They are completely identical and initiate the opening of a web page in the current tab. If you want pages to open in a new tab when clicking on links, then you should add it when forming a link target attribute with blank parameter:

Context - what is it

Although some webmasters and SEOs believe that it is better if the visitor is given the opportunity to choose (that is, do not write the target blank), because if necessary, the page can be opened in a new tab using context menu(move the cursor over the link, click right click mouse and click on the appropriate item):

Moreover, as you can see, in this case, the user has the advantage that it is possible to open the web page not only in a new tab, but also in a new window(this option cannot be implemented using HTML, only using scripts).

But I believe that not all novice users are fully familiar with the capabilities and settings of popular browsers (). It is quite likely that the reader, having followed an external hyperlink and, having lost sight of the source page (the recipient document will appear instead), will simply close the tab in their hearts.

Thus, the owner of a web resource may well not only lose a prospective visitor, but also get worse in addition behavioral factors(), which will result in the loss of page positions when ranking.

In addition, opening a page in an adjacent tab is very convenient in terms of usability (). The user follows a hyperlink to a web page, receives additional information and, as if nothing had happened, continues to study the main material.

To create an objective picture, it should be added that the application of "target="_blank"" to any external links, it turns out, is fraught with some security risk. If anyone is interested, you can read, where recommendations are given for troubleshooting problems when using target blank, as well as alternative options for implementing the task of opening a web page in a new tab.

It seems to have noted all the pros and cons of using the blank value to open a hyperlink in a new tab. If you read articles on my blog, you probably already guessed my attitude towards this parameter of the target attribute.

On the this moment for me, its pros outweigh the cons, and I am its unconditional supporter. Based on the above facts, you can form your own opinion on this issue. Although ... taking into account the emergence of new circumstances, it may change.

How to create hash links, anchors and why are they needed?

Next, I focus your attention on another type of hyperlinks, which can be useful if the material located on the web page is quite voluminous and should be structured to improve navigation.

You don’t have to look far for an example, just take a look at the table of contents of this publication at the very beginning. See, there is a list of sections of the article? Hyperlinks to these sections are just hash links. After clicking on any of them, the browser will scroll the page to the place where the corresponding part begins.

Making such links is quite simple. First you need to create anchor, putting in the required place on the page the appropriate label in the form of an ID identifier, which is one of the global attributes applied to any HTML tag.

Due to the universalism of IDs, such anchor tags can be placed almost anywhere on a web page. Since text is usually divided into paragraphs, they can be applied to . I mainly put down anchors, which divide articles into logical parts:

Having thus marked all the necessary places in the HTML code, then we create hyperlinks to them. To do this, at the end after the last slash "/" in the URL (which, as you already know, is the value of the href attribute), we sequentially write the pound sign "#" and the label name (ID):

How to generate hash links and anchors?

Moreover, if such an anchor link is placed on the same page as the anchors, then the part of the URL up to the last slash before the hash mark, inclusive, can be omitted and only “#” plus the ID name can be used as the href parameter (in fact, this is one of the options for relative links):

How to generate hash links and anchors?

That is, when compiling the table of contents for the manual for optimizing HTML code, you can easily use this lightweight option. If you put only one pound sign as the URL, without the name of the identifier, then from the place where such a link is located, the page will scroll all the way up:

Top

Actually, this is the simplest option, which again serves as an additional plus for the usability of the resource, since it makes life easier for its visitors. An attractive image can be used as an anchor to create a button.

How to remove underline and change link color

HTML developers have thought of almost all the nuances that can help in optimizing this or that aspect, the same applies to hyperlinks. For example, when following a hyperlink to another web page, and then returning back, the user will see that the hyperlink has changed color.

If he needs to repeat such actions repeatedly, then he will be able to quickly determine which links he has already clicked and which not. This option is built into almost every browser. There is no need to explain how convenient it is and how much time it saves.

Default and no CSS hyperlinks underlined and three color options, each of which has its own attribute for :

• link - sets the color of the hyperlink on the web page (default is blue, which is denoted by #0000ff);
• alink - active hyperlink color for the period of time while it is being processed by the web browser (red #ff0000);
• vlink — the color of the link visited by the user (purple, #800080).

So how do you change the colors of links displayed by browsers for your site? Well, for a simple HTML site where pages are formed manually (and I think there are practically no full-featured resources of this kind in modern realities, except for simple diaries and landing pages), you just need to find the opening tag and set the necessary parameters for it (by the way, you can use its name to designate a color), for example:

If you have installed a content management system () to administer your web resource, then, regardless of the type of engine you use, you need to open for editing the file responsible for displaying the header (header), where there is an opening tag .

If your resource is running WordPress, then for practical implementation This idea can be used as a tool for automatically inserting a picture inside a hyperlink, where you first select from the library or upload the desired image and insert it into the text:

Then select the resulting image code and press the "link" button of the editor, after which in the window that appears, paste the desired copied hyperlink:

The :target pseudo-class is one of the great features of CSS3. It matches the element pointed to by the identifier in the document's URI.

An identifier in a URI contains a “#” character followed by the name of the identifier corresponding to the value of the attribute id element in the document.

Support

Since we're talking about CSS3, the pseudo class is supported by everyone. modern browsers, except for IE versions 6 through 8. The usual frustration shouldn't stop you from deciding to use :target. Already IE9 supports the :target pseudo class.

How to use :target?

This pseudo class can have its own style, just like pseudo classes. :hover, :active or :focus for links. Same as mentioned pseudo classes :target used for certain actions with the website. Especially when a fragment identifier is used, such as this: http://example.com/index.html#lorem-ipsum .

Demonstration

The demo page provides a very clear example of how and when to use :target. Pseudo class :target can improve the level of usability of your resource.

HTML markup

Below is an example from the demo. We have 4 links and the same number of blocks. Each group has its own unique ID.

• Block 1
• Block 2
• Block 3
• Block 4

css

The following CSS code achieves the desired effect by highlighting the box with the corresponding ID (a shadow appears around the rectangle).

/* Add some space */ ul, div ( margin-bottom: 10px; ) /* Default box style */ div ( padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius: 5px; ) /* Change the appearance of the output if it matches */ div:target ( border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px #9c9c9c ; box-shadow: 0 0 4px #9c9c9c; )

Below is the result of the code action. If you click on a link, the corresponding block is highlighted and becomes active.