Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

Basic accordion from jQuery UI
One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!
Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn’t very wide, maybe 150px. Some of these cells contained several paragraphs of text. A cell 150px wide with several paragraphs of text would awkwardly tall. Hence, the Grid Accordion is born!
The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.
You can view and download the example at the end of this article. I’ll go through some of the important bits next.
HTML: Classic use of the definition list
Accordions are perfect semantic examples of definition lists. A quick review of those:
<dl>
<dt>Title</dt>
<dd>Information about that title here</dd>
<dt>Another Title</dt>
<dd>Information about that other title here</dd>
</dl>
Our grid accordion will be made up of divs floated into a horizontal row. Each div contains the title for the column and an image, as well most importantly the definition list itself. Sample of one of those divs:
<div class="info-col">
<h2>Batman</h2>
<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
<dl>
<dt>Super Power</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Costume</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Morality</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Sidekicks</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Vehicles</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Weaknesses</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
</dl>
</div>
CSS: trying to stay accessible
Most of the CSS is just simple setup and not really worth covering here (full CSS file here).
One aspect that is worth covering those is accessibility. We need to “hide” all the information panels of the table by default. One of the ways we could do that is to set the dd elements to display: none; in the CSS. This is a seriously accessibility problems though, as many screen readers will obey that CSS and completely remove that information.
Instead, we can “hide” the cells by just kicking them outside the browser window.
dd { position: absolute; top: -9999px; left: -9999px; }
This is a classic technique. In fact, it’s pretty common to see those exact CSS properties and values with a utility class name like this:
.screen-reader-text { position: absolute; top: -9999px; left: -9999px; }
We have another concern though. We’re going to be using some jQuery animations to slideUp and slideDown the info cells. So we can’t have them kicked off the page for typical viewers. We’ll move the cells back when the JavaScript first runs and then have the JavaScript hide them.
The thing about the slideDown jQuery function is that it works best when it already knows what height the element originally was before it was closed or hidden, so it can smoothly animate itself back to that original height. If we used display: none; in the CSS, this function would have no idea how tall those cells are supposed to be. Kicking them off the page instead means that the original height will be calculated, keeping that animation as smooth as it can be. We just need to make sure that the cell is set to its “full” width so the height is calculated at the width the cell will be when it’s visible.
dd { width: 299px; position: absolute; left: -9999px; top: -9999px; }
So at this point we have an accessible page of information, in that screen readers should be able to get all they need, and regular users have a smoothly operating system. However one thing that isn’t fully addressed is simply having JavaScript turned off. In that scenario, the information cells are still hidden by CSS. Personally, I’m far more concerned about accessibility than I am about people who browse around with JavaScript turned off and a torch to bear. However if you are, feel free to either 1) Put in a <noscript> message or 2) remove the CSS hiding and just let there be a bit of a flash of content before the JavaScript hides the cells.
CSS: Fun with CSS3
The CSS3 pseudo class selector :nth-of-type is particularly useful with definition lists. Because the dt and dd elements alternate, and actually can be repeated or in any order, :nth-child would be a non-maintainable way to go. Let’s color the cells of the table using :nth-of-type
dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }
dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }
dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }
dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }
dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }
dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }
For the rabble-rabble-IE-compatibility crowd, go ahead and add extra class names to the cells and do your coloring with those hooks.
One of the bits flair we are going to add is highlighting the current column. The class name of “curCol” will be applied and removed as needed via JavaScript. The current column will have a shadow around it, which of course is the perfect use for box-shadow:
.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
While I was playing with this, I originally tried using some transforms to scale up the size of the current column. Ultimately I didn’t like the look (one pixel lines look awful when scaled). I liked the shadows much better, but I found that the right edge of the shadow was being cut off the the next column. It was because that next column sat slightly above the current one in terms of vertical stacking order. Hence, the curCol class having the z-index and relative positioning, to make sure it sits on top of the others.
Randomly, I also discovered that the transform property also solved the problem. As in, setting -moz-transform: scale(1); (which scales something to 100%, or basically, does nothing to unscaled elements) also worked by making the shadow visible. In other words: using transforms on elements affects their vertical stacking order. I’m just not sure how it all works exactly quite yet.
jQuery JavaScript
Again I won’t cover every line of this (you can see the full file here). Here is the logical structure though:
- When a <dt> is clicked…
- If it’s the currently active cell, do nothing
- Otherwise…
- Close all open cells
- Shrink old title
- Enlarge new title
- Open new cell
- Mark the current column
- Make sure current column is expanded and others are shrunk
Couple of interesting things…
I would have normally used the .live() function to handle the clicks on the dt elements. But the newfangled hip way to handle this in jQuery is using .delegate()
$("#page-wrap").delegate("dt", "click", function() {
// do stuff
}
Where live would have to watch the entire document for clicks, delegate limits that watching to only the page-wrap, which is more efficient.
I showed this to Doug Neiner, and he also suggested that clicking on the photos in each column would only open the column. Then if clicked again, they would actually go to the artist’s website (where the href of each image links to). The trick here was to prevent the default action (going to the link) when clicking on an image if it’s not the current column. Instead, divert the click to the first title in that column (which will open it). We can use delegate for this again:
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
Demo and Download
Until I figure out some good licensing system… just a reminder than any downloadable example like this on this site you can use to do whatever you want with. Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it so they will think you are awesome.
Very very cool – one of the problems I constantly run into is users want to display ALL THE DATA IN THE WORLD in a single table. This would help!
ah thanks. this so interesting and yes! it its cool.
“Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it so they will think you are awesome.”
In all your seriousness, that’s hilarious. This script is incredible though, you always bring something new to the table, I’m sure these types of accordians will sprout up everywhere. Oh and nice CSS3 shadow you have on the highlighted section in the grid accordian.
Yes it is a great script and BTW, I found you unveiled ;)
Haha, wow yes you did.
Great, nice way to come up with great idea out of the usual accordions.
Neat – another great jQuery effect Chris. Pretty nice examples too and neat use of CSS3 ! Keep up the great work.
That is really smooth, it would work great for a site map.
Well, for IE7 and 8 you can do it in CSS, but still less elegant way. For example code:
dt:first-child + dd + dt + dd + dt
would select third cell :). I looks like it can be simplified:
:first-child + * + * + * + * (I didn’t test it, so I’m not 100% sure, if that would work).
I think it’s much better than changing markup.
Gave it quick go there in IE8 and seems to work fine. Nice one.
For the ie fix, what is the actual code you used for the above? I tried your fix above, but could not get it to display properly – if you could display the full solution that would be great – thanks!
It ends up becoming quite long, but it works.
dt:first-child { background: #b44835; }
dt:first-child + * { background: #b44835; }
dt:first-child + * + * { background: #ff7d3e; }
dt:first-child + * + * + * { background: #ff7d3e; }
dt:first-child + * + * + * + * { background: #ffb03b; }
dt:first-child + * + * + * + * + * { background: #ffb03b; }
dt:first-child + * + * + * + * + * + * { background: #c2a25c; }
dt:first-child + * + * + * + * + * + * + * { background: #c2a25c; }
dt:first-child + * + * + * + * + * + * + * + * { background: #4c443c; }
dt:first-child + * + * + * + * + * + * + * + * + * { background: #4c443c; }
dt:first-child + * + * + * + * + * + * + * + * + * + * { background: #656b60; }
dt:first-child + * + * + * + * + * + * + * + * + * + * + * { background: #656b60; }
Quite handy I think, but if you wanna print the content on Safari Mac 4.0.4 well… you’re doomed (just like the doctor)! Be sure to make everything appear in some kind of content so your clients don’t come asking why blank pages are coming out of the printer. Firefox 3.6 Mac seems to deal with this appropriately thought.
Thanks again Chris for this demo!
I really really like this – very slick. The animation’s a little bit jerky on Firefox and Chrome on XP, but I don’t think that matters much.
Good work! And nice semantic HTML too :)
wow… too impressive. Many useful techniques on this article, now I understand why many of my attemps to slideDown things went totally wrong (I was hidding the elements in the CSS). I certainly learned a lot jQuery useful functions today :D (I didn’t even know some of them existed)
Thanks a lot!
This looks great, I already have a couple things in mind on what I can use this for.
Also..
“…Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it…”
Your awesome. Just awesome!
I haven’t read through the script yet but that effect is brilliant looking. Not exactly sure what I will use it for but I WILL USE IT!
Great script, thanks.
Is there any way to make two separate divs in an accordion stay open at the same time? In this example, if I wanted to view both a hero’s Superpower and Costume without either one closing?
Thanks for another great insight Chris.
And for of course your sharing. This will make great fodder for the new site “itsassimpleasthat.com”
Thanks again for this, and you’re ongoing updates to your book.
Wooow, this is cool ideea! Thanks a lot for posting these nice articles!
Reminds me of this two year old post on cssnewbie:
http://www.cssnewbie.com/css-only-accordion
This is amazing. You are amazing.
just awesome as always, specially the clean markup and the smooth animations.
thanks for sharing
Why if I add a link like this :
<a href=”http://google.fr/” rel=”nofollow”>google.fr</a>
it doesnt work in any browser : ff, ie, opera …
You may need to update the example code where it’s looking for all links “a”, to something more specific like “.main-image”. Or just remove that bit of code.
Sweet! Very timely as well, I’m going to *try* to adapt it to a family-tree type table… erm.
BTW Where’s Chuck Norris in this list?
wow!
i feel like i owe you money man. the stuff you do is absolutely phenomenal and i can’t imagine how busy you must be!
I definitely want to use this to display some information on my own sites. your explanations are incredible.
please don’t die any time soon because you are single handedly dragging me in to a web design career that is going to save me from mediocrity. you have saved my life.
So cool… I saw this when you twittered about it last week. I’m going to play with it and see if I can tweak it to have a hover state on the “cells” to indicated that they’re clickable and maybe have the inactive columns become grayed out so that the focused column shows up even more prominently.
This will be a great practice for my jQuery/CSS tweaking skills. :)
Great Trick,
That’s why Chris i am fan of you.
This is so cool. Haven’t seen this before and I think it’s a great solution for much data!
very cooooooooooooool
Doesn’t quite work without javascript. How about doing the positioning of the DD’s with JS instead of CSS? That way, if no JS, all the data is displayed.
Great ! thanks
Coolest of cool…super-compact
presentation of data.
As poster above suggested,
would be nice to highlight the links,
ie: Strenghts/Sidekicks/…etc,
when User hovers mouse over each link,
to suggest the link is clickable).
GREAT, Chris!
SFdude
Chris, this is like really awesome! You are the man!
I really need to step up my game and learn jquery/javascript.
hohoho…awesome
wow, amazing
Looks excelent. Very useful stuff, thank you!
This looks awesome and very useful. I’m already seeing some great uses for this on my company’s website.
The concern I have is that without javascript the info is not visible. I know a very small percentage browses without javascript, and those people should be used to things looking pretty screwed up around the web. It’s just tough when you’re doing a company site, because you sort of have to cater to the lowest common denominator in terms of visitors.
This is a really creative concept, thanks for sharing!
Very cool! Thanks for sharing.
This doesn’t seem to work properly in IE8. I get it working in IE7 but doesn’t animate the column transitions in IE8. Even in the online demo.
Not working
Windows 7 64 Bit
IE8
Working
Windows 7 64 Bit
IE8 in IE7 compatibility mode
Firefox 3.6
Chrome
Safari
This is possibly the coolest demo I’ve ever seen on css-tricks; however it does seem to crunch in IE8. It almost seems like IE is /trying/ to animate but it just can’t handle all the processing that goes into play.
But I can’t blame Chris for IE crapping out, and like I said, its way cool. Definitely worth fiddling with for a real client website!
Wow chris probably my favorite effect you’ve posted so far I love this thing. The posibilities are endless.
Wow, this is awesome.
Hey, maybe this license fits your needs?
http://sam.zoy.org/wtfpl/COPYING
;)
PS: Excellent grid. I might incorporate it somewhere.
This is awesome!
Whoah, this is amazing!
Great tutorial! I have a question though: Is there a way to make the grid auto-closing with a click outside or after period of time?
Thanks for this great work, again ;)
I agree – this is some brilliant solution and just what I’m looking for to display a short Discography! :)
Sorry, I have a very silly question here – have been trying to use it with WordPress and can’t seem to get rid of the ‘is not a function’ message despite trying variations of
jQuery(document).ready(function($){
. Any help would be much appreciated!Apologies for the multiple posts. Just to say that the issue was resolved once I linked to the Google API version of jQuery – 1.4.2 – as featured in this article.
The current one shipped with WordPress is 1.3.2 and from what I’ve understood, .delegate only became a feature in 1.4.2.
Correct. Delgate is brand new. Also, the versions of jQuery that WP ships with are usually automatically in noConflict mode, so using like
var $j = $.noConflict();
Then using $j anywhere you would use $ is the way to go. I almost always enqueue the latest version of jQuery straight from Google and don’t mess with all that.
My biggest concern is the fact you mixed DC & Marvel.
That’s pretty good
Thank you Chris!
I did exactly this without JavaScript using the target pseudo class and came up with a solution that works in IE6+ – http://www.thecssninja.com/css/accordian-effect-using-css.
Thanks Chris. This is really awesome. Keep rockin’!
That was very cool. I was not sure how it would function at first glance, but that is so functional. Great work!
Copious awesomeness, and nary a “rel” attribute in sight! I love it!
When I close my eyes at night, I dream of having your mad skills. Thanks for sharing this.
Thanks a lot Chris!
You are a great teacher for this whole code stuff…
Very cool work indeed, an awesome idea that will really serve useful!
Absolutely Brilliant..!
A great way for small, resume sites..!
I agree… I couldn’t resist the temptation to do mine with it :)
And adding the hack of Michał Czernow make it works in IE7+ like a charm.
Excellent article… and excellent tool!
Way to go!
Will
Can you do this within a wordpress page?
Will this work with WordPress?!?!
Granted, WordPress doesn’t mind what you do on the front end. However, I’m not quite understanding how to get the script side of things to work with WordPress’ jQuery/no conflict etc.? :)
A response from the man himself! Thanks a lot!
I really like this demo, it´s cool. There is just one or two things I would add.
1: Hover Effekt
2: Real A-Tags, to trigger the animations on :focus (Yeahh, I do use the Tab Key sometimes ;-)
Cool effect Chris! Verry handy, but not for everyone.
One thing. It would be nice if you can see all the content when javascript is disabled.
You want the website to be accesible for eveyone.
Very good point that I missed as you can’t see any of the content without javascript. Perhaps set the boxes at their full view to start and then change them to their smaller state onready??
I covered accessibility in the article a bit. The content is accessible for screen readers. It is broken for CSS-On JavaScript-Off people though. If you wanted to fixed that, you’d just remove the position absolute kick-off-the-page stuff in the CSS, as well as the hard coded width. It would look pretty awkward for javascript off people, and javascript on people would see an awkward flash of content before it gets hidden. If you are cool with those things, go for it.
Very cool, I’ve been looking around for something like this for a while. The height and width changing accordion has been really tricky for me. I still haven’t found a way to make it work as a toggle. This comes very close though.
thanks a lot.. I’m searching same since long & finally i got what i want..
That is incredibly slick…if only I had a project to utilise it :)
Super Tutorial.. I will try it on my theme
Very nice effect, could be really cool in a “compare these products”. I still have an interogation though, how would it degrade if someone doesn’t have javascript enabled?
Mr. Chris thanks for this wonderful tutorial, i’m an ardent reader of your blog all the way from Nigeria, pls i want to make a special request, i beg you in the name of God, can you make a screencast of this tutorial pls, because i really need it. Thanks once again and remain bless.
An awesome menu which would take a sitemap to a new level. Most impressed!!!
I love you man, your work is stupendously amazingly brilliant!
Such a selfless guy, with so much drive. It would be hard to not aspire to be a man with so much talent.
Love it! Very generous of you to let people download your examples!
I’ve been playing around with it a bit, and noticed, on a black background, some of the white borders are missing.
See pic… http://ftpwtf.au.com/lines.gif
I’ve tried a few things, but I can’t seem to get them back!
Can anyone shed some light on the matter?
Kind Regards!
Arrrrghhh, this is awesome. You rock Chris!
Enorme Chris !!
I’m Stoned by your Job !! .. .
(french guy, french comment)
Love it man.
Simply awesome. Can see 12 uses for this.
Aaargh must find client use for this right now! Soooo nice, thank you!
And can’t believe it animates better in IE6 than IE8 :) Oh man that IE9 hype better live up to itself.
Looks rad Chris. Can’t wait to try it. Thanks for sharing.
The first thing I tried was to navigate with the arrow keys. I reckon that’d be the next step.
And +1 on the making it work with CSS on JavaScript off comment earlier, I wouldn’t want content to only be accessible with js on.
I’m not all critical though, I really like the concept!
Hi Chris
Great work yet again. Would it be possible to create / copy / duplicate this whole block below so you can have a whole new category like Super Hero Animals ;-)
Thanks
Jonathan
how am i able to style up each column in different colours ???
This effect is absolutely amazing!!! One of the reasons I am making the transition from print to web. You just can’t achieve that kind of magic in print.
I really want to find an excuse to implement this now!
It’s so very cool!
Really nice effect. Cheers Chris.
The only issue I have found is that it seems to have killed the scrollbar functionality when added within a site (and infact when I have just tested the demo). Not sure whether this was intended, but for the life of me I can’t work out how to get this functionality back.
Most of my attempts have been focused around “clear: both”, but I might be totally on the wrong track. Any tips?
And as soon as I send that, I realise the schoolboy error I made in not checking that the html and body had been set to height: 100% and overflow: hidden.
This is really really cool. I was searching for such a css-/jquery-based accordeon for a while and these existing solutions didn’t fit to me.
Thanks for sharing, Chris! I will use it in my actual project of a shop with several product groups to explain what they are selling.
Tanks a lot!
Oliver
This is pretty interesting … I never had such a need, but if I ran into this, I’ll remember to come back here …
thx as much my friend!
great tool for creating a whole webpage too.
nice greez
thom
Awsome! This menu can be used in million of cases!
Thanks and greetings from Germany
Flo
Excellent demo. Take it up a notch by adding full keyboard support (up and down arrows, for example).
Great tutorial :) this could be an interesting way to show employees in a small business too.
I’ll be keeping this for reference.
First off I just want to tank you on this great tutorial and Idea! From the first day I read it I have not been able to get it out of my head. So I am playing with it today.
2nd are there any examples of “Michał Czernow” solution for IE? Still have not wrapped my head around that fix yet. Do I remove the CSS3 and just use old CSS?
3rd When I add extra tabs and include more info in each tab that is more than a screen can hold, I do not get a scroll bar or the ability to go to the bottom of the page. My footer drops but the tabs expanded content stops at the browser’s windows size. Any ideas on how I can fix that? I would prefer to scroll the whole web page and not add scroll bar over flows for the expanded tabs. Also on smaller screens the browser does not give off the side scroll bars also. So content to the right of the screen is cut off.
Thanks, Mike
Fixed the 3rd thing, just after i posted,ha ha. I removed the overflow hidden from the body, I then had to change and add some extra css to keep the black background while scrolling.
Mike
Nice, use of jquery.
Great interfacing! This is probably easier than I think: How do I make it so the first info-col is exoanded on page load? Thanks
pick the tab you want to start and change the
to
Mike
ok did that not work change the dt to dt id=”starter”
Wow Chris! This is really great! Thanks for sharing this with us!
any word on how to implement the ie fix? Not the classes, but the solution mentioned in the comments?
Fantastic, Awesome
Wow cool effect! Thanks Chris this is really great effect.
really nice in FireFx but with IE8 there’s a flickering effect. Probably handling of the click events.
Hi,
using this at http://jasondaydesign.com
I have one issue. If I add a thumbnail, and float the image left or right with very little text, the dt element below isn’t spaced properly. The thumbnail ends up floating over the the other elements when it’s dt is the active element.
Thoughts on how to overcome? (i’ve tried a div, class, etc.)
Very nice tutorial bro well explained followed it and works great
thanks a bunch.
Unique Point of view.
THank you very much will come in handy!
Awesome use of JQuery, thanks Chris. If the licence offer still stands I will use this in an web application that I’m converting to an EXE in the future.
Cheers
miike
Hi,
Is there any way to close the opened cell if the title is clicked on for a second time? Therefore being able to toggle a cell open and closed without clicking on other cells.
Thanks
Matt
hey there, great work! wow! but one question: i inserted links (using it as a sitemap) but they don’t work. what do i have to do to make them work? i inserted the links with regular <a href…
please, please, please can you give me a workaround?
cheers, ALI.
ok nevermind, a good friend of mine helped me out (onClick…). What a shame it doesn’t work on IE8 (is there or is there not a fix for that?).
Still: Superduper work and exactly what i was looking for.
Thx again and sorry for the double-posting.
ALI.
thank you for this accordion!
really cool!
i’ve used for a website:
http://www.loudnproud.it
But i’ve the “dt” css backgrounds rules not working in IE7& IE8.
In firefox the oblique lines background is correctly showed, but all the css background attributes like color and image aren’t read form IE.
How i can solve this?
Hello!
I have got problem. I love this script but maybe you know…
how to change color in other group in 1st position?
dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }
You know like this ….
dt1:nth-of-type(2) { background: #ff7d3e; }
dt2:nth-of-type(2) { background: #00000; }
i dont have got idea how to change nth-of-type… Thanks for help Reachelmax
how do i use it multiple times in same page???