Overflow CSS Tree

Question

How do I distinguish "parents without grandchildren but with many children" in a ul/li CSS tree (e.g. CSS3 Family Tree Example)?

The ultimate goal is to make the tree fit onto an 8.5" x 11" and be able to handle li's with very long text. I'd like to stick to pure CSS if I can (I'm not 100% sure the production environment will allow for jQuery/JS/etc.)

Here's my CSS code from the above example, slightly modified:



    * {
        margin: 0;
        padding: 0;
    }

    .tree {
        white-space: nowrap;
    }

    .tree ul {
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li {
        float: none;
        display:inline-block;
        white-space: wrap;
        vertical-align:top;
        margin: 0 -2px 0 -2px;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
    width: auto;
    margin-bottom: 10px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li span {
    }

    .tree li span.rotated {
        -ms-writing-mode: tb-rl; /* old syntax. IE */
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl; /* new syntax */
    }

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

    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }

    .tree li:only-child {
        padding-top: 0px;
        float: none;
    }

    .tree li:first-child::before, .tree li:last-child::after {
        border: 0 none;
    }
    .tree li:last-child::before {
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }
    .tree li:first-child::after {
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }

    .tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 20px;
    }

    .tree li span {
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;

        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;

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

CSS can't "detect" anything. It can only style based on defined rules. There is no method to style a parent based on the number of children. — Paulie_D, Nov 08 '15 at 18:09
ok, if i figure out how to do it on the php side, by defining a separate class, how do I make it all display nice on an 8.5" x 11"? for example, parents with more than x # of children, display in a stack instead of side-to-side? — Nick, Nov 08 '15 at 18:12
found this: http://stackoverflow.com/questions/30813582/css-family-tree-alignment-issues-with-name-length but it's based on a fixed width and height (not what i'm looking for) — Nick, Nov 08 '15 at 18:15
@Nick you see that question you linked? It provides an [example](http://stackoverflow.com/help/mcve) on jsfiddle and full code in the question - you should do the same for your question, it helps everyone out who is trying to help *you* — justinw, Nov 08 '15 at 19:41

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

How do I distinguish "parents without grandchildren but with many children" in a ul/li CSS tree

The answer is, you can't with pure css...yet.

At the current time there is no parent selector in CSS. Here is a similar question, which links to several other similar questions. CSS4 might get a "parent selector".

edited May 23 '17 at 12:23

Community

1
1

answered Nov 08 '15 at 19:52

justinw

3,261
5
21
39

Overflow CSS Tree

1 Answers1