css Задаемстилиэлементамвзависимостиотколичествапотомков

Posted 2021-05-13

Код HTML


<ul>
    <li>1</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>


Код CSS


ul {
    padding:10px 1px;
    overflow:hidden;
}

li {
    float:left;
    outline:1px solid gray;
    text-align:center;
    line-height:2;
}

/* один элемент */
li:first-child:nth-last-child(1) {
        width: 100%;
}

/* два элемента */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
        width: 50%;
}

/* три элемента */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
        width: 33.3333%;
}
/* четыре элемента */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
        width: 25%;
}