Андрей Токмаков

https://habrahabr.ru/post/136588/
https://habrahabr.ru/post/142486/

Если без jquery, то с использованием каких нибудь чекбоксов, например как тут:
ruseller.com/lessons.php?rub=2&id=1377
Но это извращение какое то получается

Да есть куча сайтов со спрайтами иконок всяких разных, как платных так и бесплатных, со всевозможными лицензиями

margin и padding указываются определенному блоку и они не наследуются потомками
codepen.io/anon/pen/dvaYeb

Немного модернизировал ответ Sergey Goryachev :

Похоже? :)

https://jsfiddle.net/j85931f5/5/

Это прикол? За день по 3-5 вопросов с поисками именно такого слайдера. Не уж то так сложно, не то что бы юзать поиск, а хотя бы просто посмотреть глазами на первую страницу тостера, прочитать русские буквы на ней и увидеть такой же вопрос и ответы к нему

А зачем такая сложная вложенность?
Чем не устраивает хотя бы просто:

p {
color: #000;
font-size: 14px; 
// и т.д.
}
.one {
   padding: 0;
   margin: 0;
   line-height: 1;
}
.two {
   padding: 10px 0;
   margin: 10px;
   line-height: .5;
}
// и т.д.

тегу p указываешь все что одинаковое, классам все что разное и классы присваиваешь какие надо на нужных страницах.
Или я не правильно понял вопрос!?

codepen.io/anon/pen/gmdZoy

И при клике на раздел и любую ссылку в списке, чтобы был этот градиент постоянно открытым без разницы наводишь мышку или нет.

А вот это, если я правильно понял мысль, надо просто добавлять этому пункту меню класс, например active при переходе по этим ссылкам, в котором и прописывать нужный градиент

codepen.io/anon/pen/yMxLzm