-
200813 Feb
One of the selectors new to CSS3 is the
:target
pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2’:<h3 id="chapter_2">The Title of the Chapter</h3>
You could create a direct link to that element by using the fragment identifier at the end of the URL:
http://www.example.com/index.html#chapter_2
And, with the
:target
selector, apply a background to that element to indicate clearly where you have arrived:h3:target { background-color: #ff0; }
Pretty useful, right? Not a killer feature, but useful nonetheless. It can be made even more useful, however, with a little bit of ingenuity; how about, for example, a pure CSS image gallery?
Take a look at this example (in a browser which supports
:target
; Mozilla, Webkit or Opera browsers will do the trick). Clicking the links allows you to browse through the different images, and it’s done with minimal markup and no scripting.The first step is to create a list, with the image, name, and link in each list item; for example:
<li id="one"> <p><a href="#one">One</a></p> <img src="https://www.css3.info/wp-content/uploads/2009/09/one.jpg"> </li>
Each list item needs an
id
, which will provide the anchor, and the linkhref
is to its ownid
; this allows:target
to work its magic! All the images are absolutely positioned on top of each other, and using the selector simply changes thez-index
value so the targeted image is on top:img { position: absolute; } li:target img { z-index: 100; }
Easy! Of course, this is only a very simple example; with even more ingenuity, this could be expanded to become a very useful tool.
Update: I’ve just seen that Daniel Glazman came up with a very similar proposition before I did: CSS-only tabs.
You can skip to the end and leave a response.
-
Comments
-
01.
It works in the latest Opera snapshots, too.
-
02.
Not really a new concept, but the technique is something I haven’t exactly seen before. I like that.
-
03.
The beauty of CSS3!
Hopefully, gallery apps and other apps can find a way to maximize the use of :target, it is indeed very useful, and hope that it will not become one of the least known features collecting dusts.
-
04.
Wouldn’t this force browser to download all images beforehand? If images in your gallery are quite big that wouldn’t be a good thing. Maybe visibility/display can help this though (I haven’t tested yet).
-
05.
@ Haruka: Like most of the quick tutorials I write here, this is really just a concept rather than the finished article! You’re right that it would involve downloading all images, so probably wouldn’t be suitable for large or multiple images.
-
06.
Nice tutorial.
CSS3 are amazing, considering that there’s no javascript in this example :) -
07.
Nice!
I hope the IE team would implement this selector into IE8. I am anctious to use all these new CSS3 techniques in actual client work in the near future, but without IE there is no chance.
-
08.
I’ve tried something like this before as well. The only problem is if you have the target anchors further down the page, the page will end up “jumping around” due to the target effect. Try throwing 6-8 paragraphs of lorem ipsum above that and see how it works.
-
09.
I agree with Neal G, the fact that the page will be scrolled is the biggest problem, although this is what :target was originally meant for and mostly used for.
Maybe an extra CSS value for scrolling/unscrolling?
element:target[u] {} or something like that for unscrolling, default would be scrolling. Just a thought.
-
10.
Hacer una galería de imágenes mediante la pseudo clase :target de css3…
Un ejemplo de la utilización de la pseudo clase :target de la futura especificación CSS3…
-
11.
Target is indeed quite useful (when it gets implemented). Also think about tabs. At this moment it cannot be used progressive enhanced. However in the future it is possible to clearly link to a part of the content (one of the tabs).
Of course this is possible at this moment with JavaScript. JavaScript can perfectly read out the value of
:target
, the name is -however- different: hash. I find it very good that for this and more layout ‘things’ more and more CSS possibilities will work cross browser.The power of this pseudo class is that it is powerful in the hands of a good developer. Sometimes CSS is needed to achieve an effect, sometimes JavaScript. If you have experience you’ll find out when to use them. Did you try to use the back button, for example?
It could be quite useful to use CSS for a gallery, since you can send a link to a friend and say ‘this is a cool photo’. Without having to say how to view the photo. The back button is one of the downsides.
I know, you just show the technique. For a bit better article you could coin the ‘problems’ I addressed. I find it worth to discuss this, anyone?
-
12.
The only thing i don’t like about this is that after your done clicking through, if you want to do back you have to click “back” 10 times (or so).
-
13.
Very interesting. As it was said before, this technique is quite simple to operate and has a space for experiments…
About “Back” button I think it won’t be such a trouble, one can place button like this on the page… As usual, there are some disadvantages, I don’t think it’s a big one.
-
14.
So IE 6/7 are close to be the only browsers that don’t consider :target?
I guess a conditionnal comment with the rule
img { position: static; }
will degrade gracefully in IE (depends on the rest of the page). -
15.
Life Style – HTML и CSS, доступность и юзабилити » » CSS3: псевдо-класс :target says:Comment » February 19th, 2008 at 1:41 pm
[…] Оригинал: Making an image gallery with :target […]
-
16.
How useful are those links when CSS is disabled?
Should CSS be used for behavior like this?
-
17.
@Andreas:
When CSS is turned off, just all images will be displayed. And if there are many images, the browser will ‘scroll down’ to the image that would be displayed when CSS was enabled. -
18.
@Arjan – I know that, that’s basic HTML.
What I’m asking is “How useful are those links when CSS is disabled?”.
There’s no point in having links next to images that point to the image right next to it. And it’s also probably quite frustrating to hear the link being read out if you’re a screen-reader user.
I believe this sort of functionality should be dealt with using JS and the links should be added using JS. This way it will be completely unobtrusive.
For some tabs it may make sense to have a list of links but mostly they’re just in the way if you don’t have support for one of the layers (JS/CSS).
-
19.
@ Andreas:
Well, that is true. It doesn’t make much sense to use:target
to make an image gallery. But that’s wat I said in one of my previous comments here.The annoyances people using text2speech software is a good one, and -as you commented- unobtrusive JavaScript is a good solution in this case.
-
20.
Reading your comment before hitting ‘submit comment’ is better, it should of course read like this:
The annoyances people using text2speech software will get, is a good one. As you commented, unobtrusive JavaScript is a good solution in this case.
:)
-
21.
By the way… I’ve been trying to use :target for a tab-like system. Everything works fine, apart from one little thing: I wanted to make it so visiting the page with no anchor defined at the end of the URL would still trigger the first tab.
For example, I have:
mypage.php#tab1
mypage.php#tab2
mypage.php#tab3And I’d like mypage.php (w/o anchor) to show the same thing as mypage.php#tab1.
I tried a couple of things, and nothing worked… Is it even possible? I guess not, but I’d like to be proven wrong. -
22.
ShuttersBuddy says:Comment » April 17th, 2008 at 12:05 am
Ah… CSS3, cant wait till all browsers support it! It has some very handy/interesting stuff!
I really like your site!
-
23.
-
24.
Good one, galleries can be useful at times especially for projects etc
Thanks for posting them :)
-
25.
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
-
26.
70 Must-Have CSS3 and HTML5 Tutorials and Resources - Iconlandia says:Comment » August 10th, 2009 at 5:03 pm
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
27.
70 Must-Have CSS3 and HTML5 Tutorials and Resources - Programming Blog says:Comment » August 12th, 2009 at 2:31 am
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
28.
[…] Making an Image Gallery with :Target – 使用目标伪类 (:target pseudo-class) 创建图片画廊。 […]
-
29.
70 CSS3 and HTML 5 tutorials and resources | Netfire.us - Design tutorials, articles, resources, and creative inspiration. says:Comment » August 18th, 2009 at 12:49 am
[…] Making an Image Gallery with :Target […]
-
30.
CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | 70 CSS3 & HTML5 Tutorials | CSS 3 Gallery says:Comment » August 20th, 2009 at 11:58 am
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
31.
50+ Stunning CSS3 Resources, Cheat Sheets and Tutorials | tripwire magazine says:Comment » August 27th, 2009 at 9:45 pm
[…] Making an image gallery with :target – How to use the new CSS3 selector Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and […]
-
32.
CSS3 y HTML5: Tutoriales y recursos para el nuevo diseño web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog says:Comment » August 31st, 2009 at 10:47 am
[…] Making an Image Gallery with :Target – Tutorial de creación de galerías de imágenes utilizando target pseudo-class. […]
-
33.
70 Must-Have CSS3 and HTML5 Tutorials and Resources « Adept - Design & Development Royalty says:Comment » September 2nd, 2009 at 10:31 pm
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
34.
[…] Making an image gallery with :target – How to use the new CSS3 selector :target pseudo-class […]
-
35.
SmashingWebs: Online Show case for Designers » » 50 CSS3 Tutorials That Makes Your Works Perfect says:Comment » January 17th, 2010 at 9:18 am
[…] 35. Making an image gallery with :target […]
-
36.
great tutorial; thank you for posting
-
37.
Very cool concept. Could you please make sure that these tutorials show up in the feeds?
-
38.
70 Fantastic CSS3 and HTML5 Tutorials and Resources | DesignerWall says:Comment » March 18th, 2010 at 3:58 pm
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
39.
CSS3: 20 tutoriales | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog says:Comment » March 21st, 2010 at 11:37 am
[…] Making an image gallery with :target […]
-
40.
70 Fantastic CSS3 and HTML5 Tutorials and Resources | Designer Wall says:Comment » April 3rd, 2010 at 9:12 pm
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
41.
70 Must-Have CSS3 and HTML5 Tutorials and Resources | WebMasterSide.net | Web Resource Center says:Comment » April 27th, 2010 at 11:05 am
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
42.
-
43.
[…] Making an Image Gallery with :Target – 使用目标伪类 (:target pseudo-class) 创建图片画廊。 […]
- 44.
-
45.
50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs says:Comment » June 29th, 2010 at 7:38 pm
[…] 35. Making an image gallery with :target […]
-
46.
[…] Making an Image Gallery with :Target – 使用目标伪类 (:target pseudo-class) 创建图片画廊。 […]
-
47.
70+ 必备的 CSS3 和 HTML5 教程资源 | 俊顶视觉设计网 - 视觉创意,前端开发,web标准设计,高端网站,网页设计教程,网站策划,网站推广,网络营销。 says:Comment » August 18th, 2010 at 3:02 pm
[…] Making an Image Gallery with :Target – 使用目标伪类 (:target pseudo-class) 创建图片画廊。 […]
-
48.
[…] Making an Image Gallery with :Target […]
-
49.
70 CSS3 and HTML5 Tutorials and Resources « W3 Web Designer | Kerala Web Designer says:Comment » September 15th, 2010 at 7:13 am
[…] Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class. […]
-
50.
CSS3: Resources, Tutorials and DemosFreelance Review | Freelance Review says:Comment » October 14th, 2010 at 4:13 pm
[…] Making an Image Gallery with :Target (CSS3.info) […]
-
01.