Привет всем. Не понял зачем надо было так делать? -
«Чтобы спрятать текст, используем свойство text-indent с большим отрицательны»
Нельзя было просто взять и удалить из HTML слова Назад и Далее ?
Если удалить текст, то без стилей разметка станет нерабочей, т.к. ссылки будут пустые.
При выполнении задания столкнулся с непонятным поведением CSS.
Добавил селектор для обоих классов:
.prev, .next {
text-indent: -1000px;
background-image: url("/assets/course14/arrows.png");
background-repeat: no-repeat;
}
text-indent работает, background – нет. Усложняю селектор:
.paginator .prev, .paginator .next
И всё ок.
В чем дело? Я понимаю, что дело в специфичности, но ведь в других селекторах не заданы background-image и background-repeat, т.е. не должно быть конфликта.
Пока писал, разобрался сам 
Отвечаю для тех, кто столкнотся с тем же.
В селекторе задан фоновый цвет
.paginator a,
.paginator span {
…
background: #95a5a6;
}
Который и переопределяет наши бэкграунды, хотя, казалось бы, свойства не пересекаются, но background без уточнения затирает все, и т.к. селектор “.paginator a” специфичнее нашего, то происходит вышеописанная “непонятность”.
1 лайк
свойства-то как раз и пересекаются: background включает в себя background-image, только в случае правила background: #95a5a6; оно будет означать “цвет такой-то, рисунок - отсутствует”.
вот если бы для .paginator a было прописано background-color, а не просто background - вот тогда бы пересечения свойств не было.
1 лайк
До кучи.
Зачем здесь вертикальное выравнивание?
.paginator a,
.paginator span {
display: inline-block;
min-width: 20px;
height: 40px;
padding: 0 10px;
line-height: 40px;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-decoration: none;
color: white;
background: #95a5a6;
}