Почему стили не присваиваются классу?

Добрый день.

Прохожу курс по наследованию стилей и появился вопрос. В задании Наследование и каскадирование / Принудительное наследование рассказывают про свойство inherit, которое присваивает тегу/классу значение родительского элемента. В частности в задаче присутствует такой кусок кода:

<ul class="second-list"> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ul>

В задании просят задать Inherit для класса Second-list, соответственно я пишу:

.second-list{ border: inherit; }

И ничего не работает. Потому что писать нужно:

.second-list li { border: inherit;
}`

Вопрос - почему? Ведь мы не пишем для тех же дивов .class-name div {итд} И если уж на то пошло, то и писать полный путь body.class-name li {итд} тоже не требуется вроде. Так почему нужно в данном случае писать класс вместе с ли. Когда в других ситуациях это не требуется.

Благодарю за ответ.

.second-list - это ul. Селектор .second-list li выбирает пункты списка li внутри ul. Два разных селектора и выбирают они разные элементы.

Дошло. А не передаются эти стили через UL к LI (ведь первый является родительским для второго) потому что это не наследуемые стили?

1 лайк

Вы не корректно сформулировали вопрос: в задании сказано задать inherit для ЭЛЕМЕНТОВ списка .second-list (т.е. тегам li), а НЕ самому списку ul c классом .second list. Вы ведь понимаете, что список UL и его теги LI - это несколько разные сущности? Это как тумбочка с ящиками: UL - это сама тумбочка (т.е. это внешний блочный контейнер со своими стенками=границами), а LI - это её ЯЩИКИ! И ведь стенки тумбочки (=границы UL) и стенки ящиков (=границы LI) не обязательно одинаковы, а как правило, из разных материалов! Так и здесь, border - не наследуемое свойство. Однако с помощью inherit Вы заставляете их быть одинаковыми. Поэтому и не работает .second-list {border: inherit}: ведь Вы сами пишете, что в задании требуется унаследовать ОТ РОДИТЕЛЯ, а вот как раз родителем (“тумбочкой”) для самих списков ul является body. У которого нет никаких границ. Поэтому Ваше правило и не срабатывает. :slight_smile:

5 лайков

Алексей, спасибо большое за эти разъяснения. Стало намного понятнее. Но я чувствую что эту главу с наследованиями надо бы пройти еще несколько раз. Финальное задание я вообще прошел формально. Но реально простое гадание никакого понимания в тему не вносит.

Рад за Вас! А в плане пройти ещё раз - очень разумное решение. И не один раз. И не только эту главу. Если хотите, можем списаться лично и сделать это задание осознанно ещё раз вместе. Спустя несколько повторений в голове у меня остался план.

1 лайк

Привет. Я только за “списаться”. Вхожу в мир ХТМЛ и ЦСС, воскрешаю, так сказать, свои знания. Когда-то начинал с верстке еще в нулевые. Верстал первые сайты на таблицах, застал Эксплорер 5-6. Из-за непредсказуемости результата бросил верстку и всехгда обходил её стороной, а теперь проснулось желание углубиться не только в HTML/CSS а чем черт не шутит даже в JS и далее. Но это потом, сейчас надо с наследованием разобраться. Очень уж там все запутанно. :slight_smile: Не знаю как именно связаться, если что мой скайп dritri.verovski