Today we will talk about the main functions related to with pseudo class :target and how you can use it to create amazing effects with pure CSS, learn how to create slideshows with css help and much more.

What is: target?

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

Let's add animation

Let's spice up our effect and add some animation, like a nice little transition to change the color. See how it works.

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5 s ease; -ms-transition: color 0.5s ease; transition: color 0.5s ease; ) h1:target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

Non-target object management

Let's say we want to change the styles of the paragraph that comes after the selected heading.

This is very easy to do using the following code. Watch the demo.

h1: target + p ( background: #f7f7f7; padding: 10px; )

Creating a Simple Slideshow Using CSS

Developers have come up with tons of applications using pseudo class : target. This pseudo-selector can be useful when creating tabs, or even slide shows. Let's see how the latter can be implemented.

Let's create an unordered list. Each list item will contain a tag anchor pointing to the snippet ID and an image with the corresponding ID.

• One
• Two
• Three
• Four
• Five

Now let's add our styles:

* ( margin: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; position: relative; width: 400px; ) ul ( list-style: none; ) li ( float: left; overflow: hidden; margin: 0 20px 0 0; ) li a ( color: #222; text-decoration: none; font: 15px/1 Helvetica, 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; li a:hover ( color: #50b0df; ) li img ( position: absolute; top: 50px; left: 0; z-index: -1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; ) li img:target ( z-index: 1; ) li img:not(:target) ( opacity: 0; )

First let's add float: left all the elements on our list. We used absolute and relative positioning for elements.

Next, let's install z-index: -1 for all images and then set z-index: 1 for target images. This will cause the image to change when you click on a list item. To make the transition smoother, we will set the opacity value for the other images 0 .

Watch the pure CSS slideshow demo.

Cross-browser compatibility

Pseudo-class : target is a third-level CSS selector, which means it is supported in almost every browser except (you'll never guess) ... IE. Good old donkey only supports CSS3 selectors in versions 9 and 10.

Like any other issue with displaying CSS3 selectors in IE, this is a fairly easy fix with Selectivizr.

Thanks to this plugin and some voodoo magic, the required CSS3 selectors will be supported even in IE6.

Conclusion

Using pseudo-classes may seem complicated at first, but you'll understand how they can make your work easier and make your site more interesting. Pseudo-selector

:target- a good example of this. Just make sure you don't go overboard with the styles.

Another interesting use case :target

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

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

Support

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

How to use:target?

This pseudo class can have its own style, just like pseudo classes :hover, :active or :focus for links. Same as the mentioned pseudo classes :target used for certain actions with the website. Especially when using a fragment identifier like 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 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 identifier.

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

CSS

The following CSS code allows you to achieve the desired effect, with the help of which the block with the corresponding ID is highlighted (a shadow appears around the rectangle).

/* Add some space */ ul, div ( margin-bottom: 10px; ) /* Default block style */ div ( padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius: 5px; ) /* Change the appearance of the output when matching */ 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. If you click on a link, the corresponding block is highlighted and becomes active.

Hello, dear readers of the blog site. I decided to devote today’s publication to the most important aspect of webmastering, where I will try to explain in detail what a hyperlink is, which 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 website), you need to study the corresponding area of ​​​​hypertext markup language (), since these elements are formed using the HTML a tag, which has the ability to upgrade the link to the desired one kind.

So, today we will look at 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 picture 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 asked 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 a book, etc.), including the meaning inherent in the concept of “hyperlink” , which is associated only with hypertext, which makes it possible to nonlinearly perceive information.

Thus, a hyperlink is a special case of a link, therefore it is quite possible to use them in today’s topics on an equal basis. This is what I will use to my advantage throughout today's post, using both terms to avoid unnecessary keyword spam.

But there are also invisible service ones, created using and located within, whose task is to send numerous signals and commands to browsers to perform a particular function.

For example, using 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, the value of which is the document address (). An HTML link can lead to either an internal page of the site or 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 of various types. Because the a this, then between the opening and closing contains the content that will be displayed on the web page.

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

a little about anchors

In addition to HTTP, the secure HTTPS protocol can be used. 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:

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

download

On the web page this link will take the following form:

The browser “understands” that an object with the .zip extension can only be intended for downloading, which is what the user is prompted to do.

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

download from server

But that's not all. In a similar way an email link is created using the mailto pseudo-protocol To quickly access the letter writing tool:

write letters

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

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

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

I gave 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 solving more specialized problems. Perhaps we will look at them in more detail in other publications.

Types of hyperlinks

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 posted;

2. Domestic— connect web pages located within the same web resource.

By format:

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

By 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 the domain name of the site (in everything about domains).

Such links are most often used when referring to pages of external resources. In this case, the href value will include the full path to the desired file or web page. 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 wider coverage, which you can see if you follow the link provided.

Attributes of the a tag

Now let's see what other attributes exist, besides the required href, and how they can affect the creation of a hyperlink. The most complete data in this regard, so to speak, “first-hand,” you can find on the official website of the International W3C Consortium, 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 following links, you should add when creating a link target attribute with blank parameter:

Context - what is it?

Although some webmasters and SEO specialists believe that it is better if the visitor is given the opportunity to choose (that is, not specify a target blank), because if necessary, the page can be opened in a new tab using the context menu (move the cursor to the link, right-click and click to the appropriate point):

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 via 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 a 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 frustration.

Thus, the owner of a web resource may well not only lose a promising visitor, but also receive a deterioration in behavioral factors (), which will entail a loss of page position in ranking.

In addition, opening a page in an adjacent tab is very convenient from a usability point of view (). 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 applying “target="_blank"” to any external links turns out to be fraught with some security risks. 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 that I 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 target attribute parameter.

At the moment, its pros outweigh its cons for me, and I am an 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 would like to draw your attention to another type of hyperlinks, which can be useful if the material located on a web page is quite voluminous and should be structured to improve navigation.

You don’t have to look far for an example, just look at the table of contents of this publication at the very beginning. Do you 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.

Such links are created quite simply. First you need to create anchor by placing a corresponding label in the required place on the page in the form of an ID, which is one of the global attributes applied to any HTML tag.

Thanks to the universality of ID, such anchor tags can be installed almost anywhere on a web page. Since text is usually divided into paragraphs, they can also be applied to. I mainly put anchors with which articles are divided into logical parts:

Having thus marked all the necessary places in the HTML code, we then 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 write sequentially the pound sign “#” and the label name (ID):

How to form hash links and anchors?

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

How to form hash links and anchors?

That is, when compiling a table of contents for a manual to optimize HTML code, you can easily use this lightweight option. If you put only one hash 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 advantage for the usability of the resource, since it makes life easier for its visitors. You can use an attractive picture as an anchor to create a button.

How to remove underline and change link color

HTML developers have thought through almost all the nuances that can help in optimizing this or that aspect, the same applies to hyperlinks. For example, 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, he will be able to quickly determine which links he has already clicked and which ones he has not. This option is included in almost every browser. There is no need to explain how convenient this is and how much time it saves.

Default and non-CSS hyperlinks highlighted with underlining and three color options, each of which has its own attribute for:

• link - sets the color of the hyperlink on the web page (blue by default, which is designated #0000ff);
• alink — the color of the active hyperlink 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).

How can you change the colors of links that browsers display for your site? Well, for a simple HTML site where pages are created manually (and I think there are practically no fully functional resources of this kind left in modern realities, except perhaps simple diaries and landing pages), you just need to find the opening tag and specify the necessary parameters for it (by the way, you can use its name to indicate 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 to practically implement this idea, you can use it as a tool for automatically inserting an image inside a hyperlink, where you first select from the library or download the desired image and insert it into the text:

Then select the resulting image code and press the editor’s “link” button, after which you paste the desired copied hyperlink in the window that appears:

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

What is:target?

In CSS:target, this is a pseudo-class that allows you to select a whole “piece” of your HTML document on which some action will be performed. This could be a paragraph of text or a heading, for example.

Pseudo-classes should not be confused with pseudo-elements, which can select only a certain 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)

Pseudo-elements:

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

I think it's clear from the syntax what this or that pseudo-class or pseudo-element does. The most popular pseudo-class is :hover, all webmasters come across it; it describes the styles of an element when hovering. target works similarly and describes the styles of an element when a certain situation occurs.

Fragment IDs

In short, this is 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 the article you create a small table of contents, when clicking on an element of which a person is taken to the section where the link leads; the section needs to add an identifier.

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

Handling a click using:target

Now let’s try to make sure that when you click on the desired section from our improvised menu, the title style changes, showing which paragraph 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 is underlined. You can add life (Ruslan, hi) and make an animation for 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 the active title is a good thing, but what if you need to change the design of the text that follows it? CSS gives us this opportunity. It looks like this:

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

In this case, the plus sign means that the style should be applied to the paragraph following the heading. Thus, when the active header changes, we also change the section design 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 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. We just add the script and that's it, it works.

The only thing is, if you don’t use JQuery or MooTools, you need to connect it for this script to work. The official website has a table showing which libraries support what. If you are interested, read it. This .

Conclusion

Using pseudo classes may seem complicated, but once you understand how they work, you can do amazing things using just CSS and nothing else. Pseudo-class:target- excellent confirmation of this. With its help, you can radically change the interaction of a page with a visitor. The example above is the simplest, but it still adds a bit of interactivity to the page. But this is just a couple of lines of code.

Don't overdo it with beauty and browser support and everything will be fine.

Have a nice day

By default, when you click 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 . This attribute is not allowed in XHTML.

Syntax

...

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 be opened. 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, this value works like _self .

_top Discards all frames and loads the page in a full browser window; if there are no frames, this value works like _self . .

Default value

The use of this attribute is condemned by the HTML specification; valid code is obtained only when using the transition

Problems