79711228

Date: 2025-07-23 02:07:13
Score: 1.5
Natty:
Report link

ol li > ul li:before {display:none;}

Use my code ol + ul + paddings + smartphones css :)

Use translate from Rus please. My English is bad :P

Description

- Стили написаны под блок с ID #privacy, т.е. не затрагиваются общие стили списков
- Учтены отступы для смартфонов (уменьшены)
- Сделана красивая стилизация 1 уровня вложенности - 1 уровень выделяется как подзаголовок (цифра в квадратике слева и линия над первым пунктом)
- При наведении на пункт выделяется голубым цветом его фон (кроме 1 уровня, что логично)
- Учтены маркированные списки ul только внутри нумерованных списков ol (чтобы не затрагивались отдельные маркированные списки на странице)
- Пункты с нумерацией ниже 2 уровня не увеличивают отступы слева (для удобства чтения текста)
- Пункты с маркерами внутри нумерованных списков любой вложенности имеют одинаковый отступ слева (для удобства чтения; учтены смартфоны, на них отступ минимизирован до 5 px)
- Добавлена дата последнего редактирования документа внизу справа страницы (т.к. писалось под политику конф.)
- Ну и самое важное - маркированные списки не имеют цифру перед пунктом, если находятся внутри нумерованного списка ( нужно скрывать :before для ul li; стиль #privacy ol li > ul li:before {display:none;} )

HTML code

<div id="privacy">
<ol>
<li><span id="politika-obschie-polozheniya">Общие положения</span>
    <ol>
        <li>Пункт.</li>
        <li>Пункт.</li>
        <li>Пункт.</li>
        <li>Пункт.</li>
    </ol>
</li>
<li><span id="politika-osnovnye-principy-obrabotki-personalnyh-dannyh">Основные принципы обработки персональных данных</span>
    <ol>
        <li>Пункт 1:
            <ul>
                <li>Подпункт 1;</li>
                <li>Подпункт 2;</li>
                <li>Подпункт 3;</li>
                <li>Подпункт 4;</li>
            </ul>
        </li>
        <li>Пункт.</li>
        <li>Пункт.</li>
        <li>Пункт.</li>
    </ol>
</li>
<li><span id="usloviya-obrabotki-personalnyh-dannyh">Условия обработки персональных данных</span>
    <ol>
        <li>Пункт.</li>
        <li>Пункт:
            <ul>
                <li>Подпункт 1;</li>
                <li>Подпункт 2;</li>
                <li>Подпункт 3;</li>
            </ul>
        </li>
        <li>Пункт:
            <ul>
                <li>Подпункт;</li>
                <li>Подпункт;</li>
            </ul>
        </li>
    </ol>
</li>
</ol>
<div class="privacy-date">
    <span>Обновлено: 23.07.2025</span>
</div>
</div>

CSS code

/* Стилизация маркированного и нумерованного списков */
/* Базовые стили для всех уровней */
#privacy ol li > ul, #privacy ol {padding:0;margin:0;}
#privacy ol li, #privacy ul li {list-style-type:none;list-style-position:inside;}
#privacy ol li > ul li:last-child, #privacy ol li:last-child {margin-bottom:0;}
/* Стили при наведении на пункт списка, кроме 1 уровня */
#privacy ol li > ol li:hover {background:#dee6ff;}
/*-- НУМЕРОВАННЫЙ список --*/
/* Запуск счётчика пунктов */
#privacy ol {counter-reset:privpolicy;}
/* 1 уровень */
#privacy ol li {position:relative;background:none;font-weight:bold;border-top:2px solid #666;padding:5px 8px 0 8px;margin:40px 0 0 30px;}
#privacy ol > li:before {content:counters(privpolicy, ".");counter-increment:privpolicy;position:absolute;top:-2px;left:-30px;width:30px;height:auto;color:#fff;background:#666;font-weight:bold;text-align:center;border-top:2px solid #666;padding:4px 0;}
/* Стили только для вложенных уровней */
/* 2 уровень */
#privacy ol li ol {margin-top:30px;}
#privacy ol li ol li {margin-left:25px;}
/* 2 уровень и далее */
#privacy ol li > ol li {font-weight:normal;border:none;padding:0 8px;margin-top:0;margin-bottom:10px;}
#privacy ol li > ol li:before {padding:0;}
/* 3 уровень */
#privacy ol li ol li ol li:before {left:-38px;}
/* 3 уровень и далее */
#privacy ol li ol li > ol li {margin-left:0;}
/* 4 уровень */
#privacy ol li ol li ol li ol li:before {left:-48px;}
/* Стили для всех уровней, кроме 1 уровня */
#privacy ol li > ol li:before {top:0;color:inherit;background:inherit;font-weight:inherit;border:none;}
/*-- МАРКИРОВАННЫЙ список --*/
/* Базовые стили маркированного списка для всех уровней */
#privacy ol li > ul li {list-style-type:disc;/*background-image:url("images/li.svg");*/background-repeat:no-repeat;background-size:16px;background-position:0 2px;padding:0;margin:0 0 10px 20px;}
#privacy ol li ul {margin-top:10px;}
/* Отключение цифр тега ul, наследуемых от тега ol li */
#privacy ol li > ul li:before {display:none;}
/* Дата редактирования страницы */
.privacy-date {text-align:right;margin-top:40px;}
.privacy-date span {border-bottom:1px solid #ddd;}
/* Стилизация маркированного и нумерованного списков для смартфонов */
@media screen and (max-width: 999px) {
    /* Стилизация маркированного и нумерованного списков (для смартфонов) */
    /* 2 уровень (для смартфонов) */
    #privacy ol li ol li {margin-left:0;}
    /* Отступы тега ul для всех уровней, кроме 1 уровня (для смартфонов) */
    #privacy ol li > ul li {margin-left:10px;}
}

Result

Result Screenshot

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • No latin characters (2):
  • Low reputation (1):
Posted by: Andrew