CSS3 Family Tree

View code Play Walkthrough

Experiments

Description

Learn to display organizational data or a family tree just using CSS, without any flash or javascript. Very simple markup - just nested lists. Pseudo elements are used to draw the connectors.

It also has hover effects - try hovering on a parent and the entire lineage will be stylized.

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

80 Comments

(close)
Nick

Nick

Not bad, excellent use of code. Problem is if you wanted to use it as a family tree, you would have to find someway to show marriages, and possible other data. Still it is an excellent start to what could be a very useful library/resource.

roberto

roberto

and works for a small family tree, when you use this code for more than 4 childs doesn’t work. but this is really useful and beauty, thanks a lot.

what can i use for make this code horizontal? instead vertical?

thanks a lotttt

Ruby On Tails

Ruby On Tails

@roberto
It should work for any number of children provided that the width of the container can support it. Just increase the width and it will work. Though you get horizontal a scroller then.

Ruben Cepeda

Ruben Cepeda

Good work.

Dennis Thrysøe

Dennis Thrysøe

Great stuff!

Any chance this can be made to work in IE also? For example from version 8+?

The lines don’t show.

I tried adding selectivizr etc., but it dodn’t seem to help any.

Valerij Primachenko

Valerij Primachenko

i played with your code and wanted to share my changes

.tree li::before, .tree li::after{
content: ”;
position: absolute; top: 0;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::before {
left:0;
width: 50%;
border-right: 1px solid #ccc;
}
.tree li::after{
left: 50%;
border-left: 1px solid #ccc;
}

/*this way only-child still have a upper connector and do not need to be moved up*/
.tree li:only-child::after, .tree li:only-child::before {
border-top:0 none;
border-radius:0 !important;
}

.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}

really good resource! cheers!

NacaYoda

NacaYoda

This is nice CSS. But it is not a family tree. Not unless you’re a family of self replicating micro-organisms. It takes two to make a child (last I checked) and this very elegant tree, does not allow that to be recorded. A tree it is, sans-family.

Correct me if I’m wrong.

Ruby On Tails

Ruby On Tails

@NacaYoda

Yes you are right, this is good for organizational data display but not a practical solution for a family tree. I am working on a solution to support multiple parents which will solve that issue. I hope to get that working soon in some time.

Ruby On Tails

Ruby On Tails

@Dennis Thrysøe

I am working on the next version of this code which will have IE support to some extent and a feature of multiple parents.

Madhu Sudhan Adhikari

Madhu Sudhan Adhikari

Oh Really Gud bt IE iz not support ….. What is solution for IE ?

iamseventh

iamseventh

This is sick. Awesome! Got to learn this thing

Glenn

Glenn

This is excellent. It’s a shame there aren’t timestamps on the comments. I have no way to judge if you just started working on the multiple parents or if that comment was left a year ago. (When did you start working on that? Have a timeframe?) Great site!

Jason

Jason

I’m with Glenn, wish I knew when you were starting work on multiple parents and IE compatibility. Once those are in I think this will be great!

Nguyen Tuan Trung

Nguyen Tuan Trung

How can I change the width of the tree? My tree’s big and it’s broken, unless I zoom out to make it fit in the browser. How to add the horizonal scroll?

Thanks,
Trung

Pictures

Pictures

Great work. When using this as a chart for organizational data, would it be possible to enable ‘lanes’ for it? This is what I mean: not every child sits on the same (vertical) level, where the child of parent might be on the same level as the grand child of parent. Perhaps this could be done using data-attributes?

JC

JC

Any update on the update to the family tree to allow multiple parents? This is so freaking awesome..I just need to use it!

Daniel

Daniel

Great work on this, thanks for sharing!

Peter

Peter

Nice, thanks for sharing! Trees rock!

Sumesh

Sumesh

Great work and thanks for sharing!

Please update to the family tree to allow multiple parents

Thanks

Oleg

Oleg

Hi guys,

I need multiple parents and IE compatibility too. I’ve contacted the author. He didn’t have time until now to add a support for multiple parents and IE compatibility. Should we create a project on GitHub maybe to develop this great stuff on?

Regards.
23.07.12

Mangesh

Mangesh

If we provide the below style in place of the float:left for “li” elements – then we get the horizontal scrolling without the need of specifying the exact width for the container (eliminating the wrapping of “li” elements)

display: inline-block;
white-space: nowrap;
vertical-align: top;

However with this, there is a tiny gap left between the “li” elements – which I found in Mozilla as well as Chrome – so I put in a negative left and right margin to fix the same.

margin: 0 -2px 0 -2px;

The entire “li” element should now be styled as

.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

Yashwant

Yashwant

I like the way you explain the example with live demo along with coding Its easy to understand how it is working, First time i have seen such demo

Cool :)

Thanks
Yashwant

S.M.Mousavi

S.M.Mousavi

Cool CSS!
I made some changes into my code like as @Mangesh and also i replaced :: with : and + with ~ and i added -o-… as -moz-… into css classes (e.g. -o-border-radius). Now it works fine on Opera, Chrome, FF.
Thanks many :)

Mike Goodstadt

Mike Goodstadt

Thanks for the demo.
Was using an 8 year old version of this on my site… will update.
A side note if I may…
I think there is a misunderstanding here in the comments about the display of family trees.
A Pedigree tree (your ancestors) has a simple split into 2 at each level – mother and father. So this codeplayer example works great.
A Descendants tree shows each partner as a “child” (using the term shown here in this walkthrough) from which springs the children. So again this is a good example.
These are the two core methods of visualizing graphically genealogy for analysis.
For a more holistic display of data, a more complex network is often used (Ancestry.com’s Family view) which is interesting to browse all the connections for multiple lines. Such presentational diagrams obviously require a more complicated arrangement and coding.

moslem

moslem

pause button does not work some times. and please add a stop button to stop playback and show the result. ;)

Jagannathan

Jagannathan

How can i make it work on IE 8 and IE7 ?

Jim

Jim

Very nice.

Craig Gingell

Craig Gingell

A PHP Error was encountered

Severity: Warning

Message: in_array() expects parameter 2 to be array, null given

Filename: wordpress/kses.php

Line Number: 1116

Great resource – I’ve been using a similar approach to display family trees on my website the old way using tables, but have now updated it to use CSS3.

My version supports multiple marriages and shades males and females in blue and pink.

Take a look at an example here with over 1600 names -

http://www.gingell.com/familytree/trees.asp?id=00001&type=css3

Karan Vir Singh Sidhu

Karan Vir Singh Sidhu

Has anyone worked out a way to get multiple parents side by side?

MD

MD

Would it be possible to add CSS such that when you hover over any child, grand child, or great grand child element, it would highlight that element’s lineage?

Hessel

Hessel

Hey Ruby,

I really like your code. Could you give us an estimation when you’re done with the ‘multiple parent’ option.

Or please just give a hint how to solve it… Did you also about divorced people, remarried and getting new children… etc?

Greetings from the Netherlands!

dave

dave

Thanks to Ruby and commenters for all this – really helpful!

As a workaround for the marriage thing you can set up subclasses for husband and wife eg a.husb and a.wife where you set “border:none;” and remove the border radiuses on one side. Then render these as inline blocks in a div with a class eg. “marriage” where the div is styled with the border and border-radius. Result is that you have one box containing two individuals (with separate links and hovers) and the connectors flow into / out of the box with ruby’s existing css.

Craig Gingell

Craig Gingell

You have to display partners BELOW the individual’s name and NOT to the side, because it won’t work for family trees where an individual is married more than once. How else will you show King Henry VIII and his SIX wives?

schoo

schoo

This is great!
Does anyone have the updated code to support multiple parents?

schoo

schoo

Sara, can you put more complex example of your code please?
E.g. with 2 grandparants, parents and child? I mean HTML code for this with use of your upgraded CSS?

Sara C. Schvartzman

Sara C. Schvartzman

You are right Craig, with my code a person can only marry 2 people. Also, it can not allow more complex examples like:
Grandparents of father, Grandparents of mother, father, mother, children.

Craig Gingell

Craig Gingell

A PHP Error was encountered

Severity: Warning

Message: in_array() expects parameter 2 to be array, null given

Filename: wordpress/kses.php

Line Number: 1116

Hi Sara, I have a solution to show both paternal and maternal grandparents in the SAME tree along with the parents and the children. It’s not yet a CSS3 solution, but you can view it on my website at -

http://www.gingell.com/familytree/?fam=00002&indi=00008

When I get time, I will post a pure CSS3 solution.

schoo

schoo

Can this tree be horiznotal? If so, does anyone knows how?

schoo

schoo

Or inverse tree, so that Parent is at the bottom?

vnkrsv

vnkrsv

css not compatible with IE7 and earlier, please check back.

Falguni Debnath

Falguni Debnath

I want to know the person who created css family tree.

If any one can say or who can develop Family Tree in css code kindly intimate me replydesk@gmail.com

Sanket

Sanket

This is just amazing!

umer

umer

If you hate yourself than do this…it will work.

Visweshwar

Visweshwar

The tree wouldn’t bleed if you add this to the CSS

.tree {
white-space: nowrap;
overflow: auto;
}

@Craig Gingell good catch…

Visweshwar

Visweshwar

Also for larger trees in DIVs

tree li should have

float:none;
display:inline-block;
vertical-align:top;

in addition to

the above comment

Rick Kevin

Rick Kevin

how about that name grand child, child, parent come from a database?
i’m using a database and want to build that family tree.
how can i use it?
thank you..

gh0st

gh0st

Every comment I have read is “this is nice but “Supposed to be a family tree…Not unless you’re a family of self replicating micro-organisms” — are your serious? I mean, SERIOUS?

This is some slick code, absolutely showed me what I was trying to grasp, and I totally appreciate the author for putting this up. Thank you sir from all us self replicating micro-organisms!!!

edy

edy

Nice..

But any idea for add partner? i mean before add child, i want to add partner first, like father and mother

Thanks

Craig Gingell

Craig Gingell

I gave up trying to make this work on IE8. Instead, I’m detecting IE8 (and earlier) on the server and rendering the page with a totally different template. Here’s my tree with support for multiple marriages

http://www.gingell.com/familytree/?tree=00001

Anyone trying to display an individual’s partner to the side should give up now. I have instances in my tree where some people have been married more than twice. There is no easy way to show that other than displaying partners below.

Ciaran

Ciaran

Hi all,
The uppermost branches of my tree are
spread wider the branches following them making
a large family tree difficult to view.
Is this norm for everybody else or is there a way
around it?
http://www.mooneycallans.com/mooneyTree2.html
Cheers
Ciaran

Chris

Chris

Great code. The best looking i have found online. Just one question. Is it hard to write this code so that the tree starts from left to right rather than top to bottom? I am not keen with css styling at all so any help would be great.

Paul d'Aoust

Paul d'Aoust

This demo is so beautiful it made me want to cry. Seriously — it’s so elegant and uses the natural semantic structure of lists to good effect. It doesn’t feel like a hack, which was unexpected.

Misha

Misha

Super helpful, thanks a ton!

Sunil Manandhar

Sunil Manandhar

Really nice work, very clean css.
Will you help me by writing css, converting tree structure in horizontal manner.

Ben Kuhl

Ben Kuhl

Fantastic solution!!

Jonathan Nicholson

Jonathan Nicholson

I have used this on my family tree site. Has anybody got it to work with IE?

shwan

shwan

how to make it smaller?

Nebojša

Nebojša

This is just amazing!

Arslan

Arslan

good stuff brother…

MrNguyen

MrNguyen

Hi everyone!
Can show tree to hovertical? if so, how?

zawaruddin

zawaruddin

great, excellent work..
very interesting… :)

Jabon Merah

Jabon Merah

Since the admin of this web site is working, no hesitation very soon it will be renowned, due to
its feature contents.

Drewman

Drewman

You’re really awesome

Isuru

Isuru

This is awesome! Thanks for the code. I have a problem. I need to display it in an iPhone screen. But when I view it, the tree breaks. How can I make it responsive? What CSS rules do I have to alter?

merlin

merlin

Ok so the parents support has been added but any idea when will the code be released? or will you have to buy it?

Charmie91752

Charmie91752

Tell me, would this code allow a client to input data on the fly without having to know code? I have a cat breeder for whom this might be a great solution for the bloodlines.

rg

rg

This is wonderful! Any idea how to access the new multi-parent code?

Louis

Louis

Thank you, this is great!

Anil

Anil

Hi,

This is my first time here, and I see multiple parents support has been added. Would like to know when the code will be available.

Apologize if it has been answered before.

Thanks
Anil

Mark

Mark

Is there a way to make this auto fit into one screen?

80 Comments

Description

5x 10x 15x 20x