You can easily find many tutorials on the web using the: target pseudo-class. However, we will 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 a certain whole "piece" of your HTML-document, on which some action will be performed. This can 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, it is encountered by all webmasters, it describes the styles of the element on hover. target works in a similar way and describes the styles of an element when a certain situation occurs.
Fragment IDs
In short, this is the kind of thing that our pseudo-class is tied to. This is a hashtag with a word or phrase at the end of the address. It looks like this:
This technique can be used to navigate within an article. For example, at the beginning of the article, you create a small table of contents, when a person clicks on an element of which the person gets to the section where the link leads, to the section, while adding an identifier.
This works in pure HTML, no tweaks required. Small identifiers.
Handling a click with: target
Now let's try to make sure that when you click on the desired section from our impromptu menu, the heading 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 underline. You can add life (Ruslan, hello) and animate the title color change:
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 headline is a good thing, but what if you need to change the appearance 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 signifies that the style should be applied to the paragraph following the heading. Thus, when changing the active title - we also change the design of the section with the text that "belongs to him."
Browser support
The target pseudo-class is from the third revision 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. 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 it for this script to work. The official site has a table of which libraries support which. If you are interested, read it. It .
Conclusion
Using pseudo-classes may seem like a daunting task, but once you understand how they work, you can do amazing things with just CSS and nothing else. The: target pseudo-class- an excellent confirmation of this. With its help, 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. But this is just a couple of lines of code.
Don't overdo it with beauty and browser support and you'll 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 use this attribute.
Syntax
...Required Attribute
The 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 the page into the current window. _parent Loads the page to the parent frame, if there are no frames, then this value works like _self. _top Cancels all frames and loads the page in 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 by using a transient .
HTML5 IE Cr Op Sa Fx
Open in a new window
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 with all the details 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 hypertext markup language (), since these elements are formed using the HTML a tag, which has the ability to update the link to the desired species.
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 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 range (link to Siberia, bank 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 for non-linear perception of information.
Thus, a hyperlink is a special case of a link, therefore, it is quite possible to use them in today's topic on an equal basis. I will take advantage of this in my "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, created using and within limits, the task of which 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 for any page open in the browser):
For now, let's leave the 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 address of the document (). An HTML link can lead to both an internal site page and an external document.
One more important note. The use of the href attribute makes hyperlinks clickable, that is, it enables users to automatically navigate to the corresponding page of the website as a result of clicking on them.
How to make 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. Insofar as a this, then between the opening and closing contains the content that will be displayed on the web page.
it the content is called anchor and can be presented in the form of text or an image (we will talk in more detail below how to make a picture a link). As I already noted, the anchor will be clickable. Consider an example of a hyperlink with text content. This is how its construction will look 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 the 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 on the following guise:
The browser "understands" that an object with the .zip extension can only be used for downloading, which is what the user suggests to do.
By the way, the path to any file is sometimes specified via FTP (). Then, in the URL that is used as a parameter of the href attribute, you should simply replace the HTTP (HTTPS) protocol with FTP. The file link will look like this:
download from server
But that's not all. In a similar way a link to an email is created using the pseudo-mailto protocol for quick access to the letter writing tool:
write letters
After clicking on such a link, a window of the default mail 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 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 can access the mailing form in one click.
But this type of communication on web resources is no longer so popular (especially since it can be established, for example,), because mail addresses opened in this way are actively intercepted using software and are used by all sorts of spammers.
I have cited as an example only the most common protocols included in 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 problems of a narrower profile. Perhaps we will consider them in more detail in other publications.
Types of hyperlinks
Now let's try to classify links according to one or another characteristic.
By their area of action:
1. External- lead to pages located outside the site on which they are posted;
2. Internal- link web pages located 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 the domain name of the site (in everything about domains).
These links are more commonly used when linking to external resource pages. In this case, the href value will include the full path to the required file or web page. Here's 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 hyperlinks). In this case, the protocol (HTTP) and the site domain will be removed from the URL address:
Context - what is it
Relative hyperlinks on a web page can provide links to internal pages. As such, they are shorter, making the HTML easier to use. Of course, everything is not so simple, and requires wider coverage, as you can see if you follow the link provided.
A tag attributes
Now let's see what other attributes, besides the required href, exist, and how they can affect the creation of a hyperlink. The most complete data in this regard, so to speak, "first hand" can be found on the official website of the W3C International Consortium, where the latest information appears the fastest.
They are completely identical and initiate the opening of a web page in the current tab. If you want the pages to open in a new tab when clicking on the links, then you should add when forming the 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, do not write 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 corresponding item):
Moreover, as you can see, in this case the user has the advantage that it is possible to open a 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 possible that the reader, having followed the 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 promising visitor, but also get a worsening of behavioral factors (), which will entail a loss of page positions in ranking.
In addition, opening a page in an adjacent tab is very convenient from a usability point of view (). The user follows the hyperlink to the 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, it turns out, is fraught with some security risk. If anyone is interested, you can read where recommendations are given for eliminating problems when using target blank, as well as alternative options for implementing the task of opening a web page in a new tab are presented.
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 are reading articles on my blog, then you probably already guessed about my attitude to this parameter of the target attribute.
At the moment, for me, its pluses outweigh the minuses, and I am an unconditional supporter of it. Based on the above facts, you may form your own opinion on this issue. Although ... given the emergence of new circumstances, it may change.
How to create hash links, anchors and why are they needed?
Next, I draw your attention to another type of hyperlinks that can be useful if the material on the web page is quite voluminous and should be structured to improve navigation.
You don't have to go 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 point where the corresponding part begins.
Such links are designed quite simply. First you need to create anchor by placing the appropriate 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.
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 that divide the articles into logical parts:
Having marked in this way 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 write sequentially the pound sign "#" and the name of the tag (ID):
How to generate 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 the last slash before the hash inclusive can be omitted and only "#" plus the ID name can be used as the href parameter (in fact, this is one of the relative links):
How to generate hash links and anchors?
That is, when compiling a table of contents for the manual to optimize 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 to the top:
To the top
Actually, this is the simplest option, which again serves as an additional advantage of the resource usability, since it makes life easier for its visitors. You can use an attractive image as an anchor for creating a button.
Remove underline and change link color
The HTML developers have thought of almost all the nuances that can help in optimizing one aspect or another, 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 more than once, then he will be able to quickly determine which links he has already clicked and which have not. This option is included in almost every browser. There is no need to explain how convenient it is and how much time it saves.
By default and without using CSS hyperlinks highlighted with underline 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, denoted by # 0000ff);
- alink - the color of the active hyperlink as long as it is being processed by the web browser (red # ff0000);
- vlink - the color of the link visited by the user (purple, # 800080).
How do you replace the colors of links displayed by browsers for your site? Well, for a simple HTML-site where pages are formed manually (and I think that there are practically no fully functional resources of this kind in modern realities, except for simple diaries and landing pages), you just need to find the opening tag
and prescribe 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 () for administering your web resource, then, regardless of the type of engine you are using, you need to open for editing the file responsible for the output of the header (header), where the opening tag is present
.If your resource runs under the control of WordPress, then for the practical implementation of this idea, you can use as a tool for automatically inserting a picture into a hyperlink, where you first select from the library or load the desired image and insert it into the text:
Then select the resulting image code and press the "link" button of the editor, then paste the desired copied hyperlink in the window that appears:
Today we will talk about the main functions related with pseudo class : target and how you can use it to create stunning pure CSS effects, learn how to create slideshows using css 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;)
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 follows the selected heading.
It is very easy to do this with the following code. See demo.
h1: target + p (background: # f7f7f7; padding: 10px;)
Creating a simple slideshow with CSS
Developers have come up with tons of apps using pseudo-class : target... This pseudo selector can come in handy when creating tabs, or even slideshows. Let's see how you can implement the latter.
For let's create an unordered list. Each item in the list will contain an anchor tag 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; -o-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 of our list. We used absolute and relative positioning for the elements.
Next, 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 the list item. To make the transition smoother, we will set the opacity value for other images. 0 .
See a pure CSS slideshow demo.
Cross-browser compatibility
Pseudo-class : target is a level 3 CSS selector, which means it is supported in almost every browser except (you won’t guess) ... IE. The good old donkey only supports CSS3 selectors in versions 9 and 10.
As with any CSS3 selector rendering issue in IE, this is fairly easy to fix with Selectivizr.
Thanks to this plugin and the magic of voodoo, the required CSS3 selectors will be supported even in IE6.
Conclusion
Using pseudo-classes may seem daunting at first, but why do you understand how they can make your work easier and make your site more interesting. Pseudo selector
: target is a good example. Just make sure you don't overdo it with the styles.
Another interesting use case : target
To go to the selected fragment of the document, the # symbol is written in the address and the name of the identifier is indicated. For example, in the address http://www.w3.org/TR/css3-selectors/#target-pseudo there is a transition to the element, the id attribute of which is set as target-pseudo. This address record is called the "target item". The: target pseudo-class applies to the target element, in other words, the identifier that is specified in the browser's address bar.
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of value. | <размер> |
| A && B | The values must be displayed in the order shown. | <размер> && <цвет> |
| A | B | Indicates that only one of the suggested values should be selected (A or B). | normal | small-caps |
| A || B | Each value can be used alone or in conjunction with others in any order. | width || count |
| Groups values. | [crop || cross] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times, separated by commas. | <время># |
Example
- Story 1
- Story 2
Story 1
The story of how it was necessary to make a grave, they began to dig it, and then bury it, and what came of it.
Story 2
The story of how mysterious pink footprints with six fingers appeared near the dining room, and why this happened.
In this example, the target element is highlighted with a background color.
Note
In Safari prior to 3.0, style rules are not applied if the user uses browser navigation (Back and Forward buttons).
Specification
Each specification goes through several stages of approval.
- Recommendation - This specification has been endorsed by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
- Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of the draft after discussion and amendments for community review.
- Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
- Draft ( Draft specification) is the first draft of the standard.
Browsers
The following conventions are used in the browser table.