Переполнение дерева CSS

Question

Как отличить «родителей без внуков, но с большим количеством детей» в дереве CSS ul/li (например,)?

Конечная цель - сделать дерево подходящим для 8.5 "x 11" и иметь возможность обрабатывать li с очень длинным текстом. Я бы хотел придерживаться чистого CSS, если смогу (я не уверен на 100%, что производственная среда позволит jQuery/JS и т. Д.)

Вот мой код CSS из приведенного выше примера, слегка измененный:

    * { 
     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; 
    } 

Answer 1

Как я отличаю «родители без внуков, но с большим количеством детей» в уль/li CSS дерева

ответ, вы не можете с чистой CSS ... до сих пор.

В настоящее время нет parent селектор в CSS. Here is a similar question, which links to several other similar questions. CSS4 может получить "parent selector".