What is target in css. Target in CSS

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

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

Support

Since we're talking about CSS3, the pseudo-class is supported by all modern browsers except IE 6 through 8. The usual frustration shouldn't stop you from using: target. IE9 already supports the: target pseudo class.

How do I use: target?

This pseudo class can have its own style, just like pseudo classes. : hover, : active or : focus for links. As well as the aforementioned pseudo classes : target used in certain actions with the website. Especially when a fragment identifier is used, such as 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 selected (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 view 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 the link, then the corresponding block is highlighted and becomes active.

Is there a way to handle click events on CSS without using JavaScript. You can use the method with : target... But what if it can't be used? There is another method.

Watch a demo. It's completely done in CSS, not a single line of JavaScript. It is based on the original use of the: active and: hover selectors.

Description

First, you need to create a container that will contain the button and the blocks that are displayed on the click of the mouse. The markup structure will be something like this:

You need to make the .content invisible until the mouse button is pressed on the .wrapper. To solve the problem, set the display: none property for .content. Then, when we click on the .wrapper, we will enable the display: block property for the .content. To do this, set the display: block property for .wrapper: active .content. In this state, the .content will only be visible when the mouse button is pressed. If you let go of it, the .content disappears again. For fixing, let's make it so that when the mouse cursor is over .content, the display: block property is assigned to the element. That is, we set the display: block property for .content: hover. The CSS code will look like this:

Content (display: none;) .wrapper: active .content (display: block;) .content: hover (display: block;)

It remains only to "comb" the appearance and give it clarity:

Wrapper (position: relative;) .button (background: yellow; height: 20px; width: 150px;) .content (position: absolute; padding-top: 20px;) .content li (background: red;)

The button text in the above code will have a yellow background, and the information displayed when the mouse button is pressed will have a red background.

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. ... In XHTML, the use of this attribute is prohibited.

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 open. 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 obtained only by using a transient .

HTML5 IE Cr Op Sa Fx

Open in a new window

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 liven 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 list item will contain an anchor tag that points 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 any 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 voodoo magic, 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

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, not without examples.

What is: target?

In CSS: target is a pseudo-class that allows you to select a 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 identifiers

In short, this is the kind of thing to which our pseudo-class is tied. 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 he 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 belongs to 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. On the official site there is 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 should be fine.

Have a nice day